I'm trying to use this fix to support native-feeling scrolling on a webpage in iOS 5. I would like to update the position of an element when the page scrolls, but the position returned by scrollTop seems to be slightly off from the actual position of the element on the page.
I've created an example which tries to keep a block of text in the same place as the page scrolls. If you try it on an iOS device you can see that the text actually jitters around instead of staying in exactly the same place. This is upsetting because using touchmove events directly, this can be done with no jittering whatsoever. But obviously, using the built-in scrolling algorithm is preferable.
Does anyone know of a workaround?
Example: live
<!DOCTYPE html>
<html>
<head>
<title>Scrolling test</title>
<meta charset="utf8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<style type="text/css" media="screen">
* {
margin: 0px;
padding: 0px;
-webkit-backface-visibility: hidden;
}
#outer, #wrapper {
position: absolute;
height: 100%;
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$.event.props.push("touches");
$(function() {
$("#wrapper").on("touchmove", function(e) {
$("#thing").css("-webkit-transform", "translateY(" + ($(this).scrollTop()) + "px)");
});
});
</script>
</head>
<body>
<div id="outer">
<div id="wrapper">
<div id="thing">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
</body>
</html>
I've filed 2 Safari/WebKit bugs related to this (rdar://10980574) and (rdar://10980592). If there are any substantial updates (and I remember to) I'll come back and update this answer.