Run codes below on iOS 5.1's Safari: <!DOCTYPE html> <meta charset="utf-8"> <title>An HTML5 Document</title> <style> div:nth-child(1) { background: yellow; width: 400px; height: 300px; } div:nth-child(2) { background: red; width: 400px; height: 300px; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Can't be run! Bug! */ } </style> <div> Click me! </div> <div> Scroll down me!<br>Scroll down me!<br>Scroll down me!<br>Scroll down me!<br>Scroll down me!<br>Scroll down me!<br>Scroll down me!<br>Scroll down me!<br>Scroll down me!<br>Scroll down me!<br>Scroll down me!<br>Scroll down me!<br>Scroll down me!<br>Scroll down me!<br>Scroll down me!<br>Scroll down me! </div> <div> So you can click on the first div element. It's OK. But you can't scroll down the 2nd div's contents via touch move on iOS 5.1's Safari. This is a bug. </div> <script> document.addEventListener('click', function (event) { event.preventDefault(); }, false); document.querySelector('div:nth-child(1)').addEventListener('click', function () { alert('Clicked successfully!'); }, false); document.addEventListener('touchmove', function (event) { event.preventDefault(); }, false); </script>
Please file this bug via <http://bugreport.apple.com>. Most iOS specific bugs go there.
I won't report any bugs to Apple anymore. Apple product's UX is so terrible. Your WebKit bug report system and Apple bug report system ate both garbages.