We were experiencing some weird behavior when testing the mobile site we were developing on IPhones. Long pages were missing their scrollbars. Touch scrolling was not smooth at all. And on pages with form elements, the page would seem to get stuck when scrolling. Stuck such that you couldn't scroll any further down or you couldn't scroll up if you were already down.
After a bit of research, I found this webkit css style that when applied to our outmost div, seemed to resolve these scrolling issues.
-webkit-overflow-scrolling: touch;
After adding that single line of css, all the scrolling issues mentioned earlier seemed to disappear. But there were additional issues that appeared.
The first issue surfaced when scrolling quickly on pages of our site with complex layouts. When they were scrolled too fast, white blocks temporarily showed up. The renderer caught up and displayed the content after the scrolling stopped, but it just felt and looked weird.
The second issue we noticed on pages with text boxes. When you went to type in the textboxes, you wouldn't see the text, but it would show up after exiting the focus of that textbox.
Researching the first issue, I came across this post about rendering issues with webkit overflow scrolling which mentioned a work around. So I went through all of our css, adding an additional style rule to any rules that had position: relative defined.
-webkit-transform: translate3d(0,0,0);
And that seemed to fix both the fast scrolling and form issues I mentioned. Very strange, but applying a no move/change 3D transformation gets the css to be hardware accelerated and makes the page behave better. I know it feels like a hack, but it's a hack that seems to work.