I have a hybrid mobile app. Some of my pages include large area of interactive SVG images(graphs, charts). I have already added -webkit-overflow-scrolling: touch; to my content area. This helps in smooth scrolling where the SVG image is not there. But when I try to scroll on the SVG, this is not smooth at all.
Please suggest any other work around possible for this kind of problems.
.oj-hybrid-applayout-page {
-webkit-overflow-scrolling: touch;
}
You shouldn't use complex/large SVGs if you want to smooth scrolling, they really impact the performance on webview when scrolling. There is nothing you can do to fix that.
If you use images, you should also consider compressing them and not use full blown PNGs where possible.
Also welcome to SO.
Related
I'm working on my personal website. There's this weird problem that on my iOS device (I don't have any other mobile devices to test this on) scrolling seems bugged. It's not smooth, and it immediately stops when you lift your finger off the screen.
As I have no clue where the problem might be, I'll not post the entire code of my website. It is live at nielshak.com.
Things I tried: removing all JS from my website (to exclude any JS is tampering with scroll behaviour), removing all :hover css selectors (to exclude that any hover elements might tamper with scrolling) and adding -webkit-overflow-scrolling: touch to the css.
I'm at a total loss here. I really appreciate all help!
Edit: I still have no insights on this. Is there anyone out there with further suggestions?
Did you try -webkit-overflow-scrolling?. Add -webkit-overflow-scrolling: touch; to page-wrapper.
I searched all over but can't find a solution. I have a mobile website using a container div (width and height 100%). I use -webkit-overflow-scrolling: touch; to make the content in div smooth scrolling.
However, normally when you scroll down in an iphone your addressbar will shrink and the controls at the bottom totally disappear. Because of the container div having the same size as the body the phone does not detect scrolling in the body. And therefor it will not optimize screen availability.
Does anyone know a good workaround?
I fiddled with BRIM and other JS solutions but nothing seems to work. Thanks in advance.
I am building a mobile responsive website.
I noticed that when scrolling the page using an iPhone, the scroll is sticky and not smooth, while on android mobiles it's ok.
What can be the cause of this sticky scroll? I cant even see it on my browser! Please take a look at my code on JSfiddle. The images won't load but you don't need them anyway (you can see their borders). I recommend you to use 320px width to view the page so the icons are all organized.
So there is this line you can add to your body or the main div: -webkit-overflow-scrolling: touch;
Made the trick.
As of jqm1.4 it seems like the native like "momentum scrolling" on iOS is no more.
Anyone know how this effect can be achieved? I feel like my app really falls short without it.
Add these two properties to the element
#your-scrollable-element {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
In Apple's list of supported CSS properties they describe the touch behavior as "Native-style scrolling. Specifying this style has the effect of creating a stacking context (like opacity, masks, and transforms)."
I'm looking for an responsive image slider for a particular case.
This is what I would look to happen on desktop/tablet/mobile.
You can also swipe through the images on tablet/mobile.
It's important that the images don't need to have the same width. (height is always the same)
Does someone knows a js library for this?
I searched but most of the time you only have view of 1 image.
How's this?
http://jquery.lemmonjuice.com/plugins/slider-variable-widths.php
It supports IE6+ and is very lightweight. You can easily make it responsive by wrapping it in a div with overflow: hidden; that varies in width as you require. Alternatively, you could have a go at rewriting it as you require (it's quite a lightweight script!)
The lemmon slider works great with Touch Swipe. The instructions to add this are here:
https://github.com/lemmon/Lemmon-Slider/issues/5#issuecomment-25177163