One of the newest introductions to webkit in iOS 5 was overflow-scrolling: touch. This allows you to set overflow: scroll on an element and have it scroll with momentum using one finger. Previously you could only scroll these elements with two fingers, and there was no momentum.
I’m pretty excited about this new feature, and I’ve been using it in jQuery Mobile with an app I’ve developed (more on that soon). However, I’ve found a couple of frustrating implementation bugs in iOS 5.0.1.
Sticky Scrolling
The first bug causes the element to stop scrolling at random intervals. Sometimes the element will not scroll at all, and other times it will scroll very slowly, giving it a sticky feeling. It’s bizarre and there seems to be no pattern to it at all. Based on research and talking to some other folks, it looks as though it’s caused by child elements with position: relative; set, or with an :active pseudo-class. Removing these CSS properties will fix, or at lease reduce cases of sticky scrolling.
Click Events
If you have click or tap events bound to child elements then I’ve found that the firing of these events sometimes be suppressed if the parent scrollTop() value is zero. If you scroll the parent slightly, then try to click on a child element, the events will fire as normal.
Both of these issues have been reported to Apple, so the hope is that they will be fixed in the next version of iOS.
