IOW it behaves the way you'd expect it to on a mobile device. Putting your finger down stops the scrolling. It contains the same data as the first, but it scrolls smoothly using the accelerometer feature's strength of the swipe to determine how far to scroll. The second list adds the -webkit-overflow-scrolling: touch behavior. While that works, it's not the scroll behavior you want to see on a mobile device - we've become spoiled by smooth accelerator based scrolling that responds to the vigor of your swipe. The list on the top uses default scrolling and while it works it scrolls slowly and has none of the swipe scrolling features, but rather moves exactly as far as you move your finger. On the mobile page you'll have to use the Slow Box/Fast Box links to switch between the slow and fast fast scrolling boxes.
#Css webkit overflow scrolling code#
You can scan the QR code on the sample page, or the one below here (I use QRReader for iOS, or on Android) to bring up the page on your phone without typing out the long URL: To see the problem though you'll have to access the page on a mobile device. Here's what the desktop and mobile views of the sample look like: In this example, I generate some repetitive list data in JavaScript and then render the data into a list using handlebars.js (you can look at the self contained source in browser). The page has two lists with the same data. To demonstrate here's a small sample form that shows a slow list with default scrolling and one that's optimized below it: I'd be curious to hear what devices outside of iOS have scroll issues that are fixed by using -webkit-overflow-scrolling tuning when you try the sample form and compare the two lists it displays.
#Css webkit overflow scrolling android#
From comments it appears that many Android devices have this scroll behavior turned on by default, so this tweak only applies to iOS devices and older Android devices. While the iOS devices browser level scrollbars are super smooth, actual tags are terribly and stuttering.
This issue primarily concerns iOS devices like iPhone, iPod Touch and iPad. Hey that’s the way it’s supposed to work in the first place.
Scrolling is smooth and there's no stuttering even for fairly large lists. Luckily there's an easy workaround for this behavior via a WebKit specific override style that enables a better touch based browsing experience:Īpplying this style makes a difference of night and day providing elastic and accelerometer based scrolling behavior that you would expect - the harder you press and the faster you swipe the further the scrolling goes. If the list gets large or the layout for each item is complex the list may get so slow it appears to lock up altogether or jump unpredictably. Instead of smooth, elastic scrolling the default scrolling provides only a slow and often stuttering behavior. Unlike desktop browsers which easily scroll content, many mobile browsers by default have a terrible experience scrolling tags that have overflow-y: scroll or auto when there's more than a few elements of overflow. One thing that is annoying in WebKit mobile browsers - and especially on iOS mobile browsers - is the default scroll behavior for HTML elements that have text overflow.
0 kommentar(er)
