webkit-overflow-scrolling: touch;
This works perfectly in terms of scrolling, but it blurs the text and images noticeably in the <DIV> with overflow: scroll applied. I have tried this on 3 different iPads with iOS5.
The easing/bounce algorithm native from Apple are much better than any JS equivalent, so I would like to start using this new feature! It is even more noticeable with the font I am required to use.
Here is a demo you can try from an iPad w/ iOS5:
http://sseeger.drivehq.com/test.htm [Stark, NO webkit-overflow-scrolling: touch;]
http://sseeger.drivehq.com/test2.htm [Blurry, webkit-overflow-scrolling: touch;]
The issue you were seeing is due to the default zooming of the ipad. Paul's response was on the right track but also unnecessarily disables user zooming. You just need to correctly set the initial scale and width of your screen.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
For my test case, try opening these two pages on an ipad: http://www.jasonbuckboyer.com/playground/ios/overflow_scrolling/blurred.html (Blurred) http://www.jasonbuckboyer.com/playground/ios/overflow_scrolling/not_blurred.html (Not Blurred)