Menu
I am in the process of making a responsive mobile website. When testing on my phone, I noticed that I couldn't scroll vertically past something that could be scrolled horizontally.
Here is an example of what I mean (sorry you can't see the horizontal scroll on your phone but just trust me that it works).
Mobile Webkit browsers can't scroll past the table in this example: http://jsfiddle.net/tArEy/
Then I commented out the following line to make the vertical scrolling work. However, this made the horizontal scrolling a little bit choppy.
-webkit-overflow-scrolling: touch;
Mobile Webkit browsers can scroll past the table in this example, but it's a little more glitchy. http://jsfiddle.net/tArEy/1/
Does anyone have an idea of how to fix this using CSS only?
The demos have to be tested on a browser. (I'm running the Chrome browser on Android. I assume the iPhone has the same problem).
Edit:
It turns out that scrolling horizontally is horribly buggy in mobile webkit browsers without the following line in your CSS:
-webkit-overflow-scrolling: touch;
However, that line makes it impossible to scroll vertically so I'm kind of at a standstill. Other non-webkit browsers scroll horizontally just fine.
Edit 2:
I got my hands on an iphone. the overflow scrolling is hardware accelerated and works flawlessly. This seems to be a Chrome for Android problem only.
600
The -webkit-overflow-scrolling CSS property controls whether or not touch devices use momentum-based scrolling for a given element.
This means that you cannot use webkit-overflow-scrolling:touch in PhoneGap apps, and for most other use cases at this time. Instead you can use overflow: scroll, but that's only supported in Android 3.0+, so use iScroll, or the many other alternatives out there.
To change this, set the min-width or min-height property.” This means that a flex item with a long word won't shrink below its minimum content size. To fix this, we can either use an overflow value other than visible , or we can set min-width: 0 on the flex item.
This was a bug in chrome for Android only. It was fixed in a recent upgrade.
100
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
