Solved: position: fixed - scrollTo bug on iOS
On a recent project for a client we experienced the well known iOS5 bug with fixed positioned elements not actually being where they are rendered. This happens after a programmatic call to window.scrollTo() - see the bug in action: http://jsbin.com/position-fixed-bug-ios/12/
Rundown of known "fixes":
Append a div with 101% height to the body causing the browser to recalculate the viewport height - this didn't work for us since we have absolutely positioned page-containers with content taller than the body.
Adjust document width - this triggers a reflow of the page but causes right aligned elements on the page to shift position by 1px and back when the fix is applied.
A better fix
We came up with our version based on solution #2. Instead of adjusting the document width, we add a 1px right padding on the document and then remove it within a setTimeout callback. This has no visible impact on the position of elements on page and triggers a reflow which makes fixed elements magically pop back into place.
View gist
Note: make sure you don't have box-sizing: border-box; on the html element since this would decrease the width by 1px and right aligned elements might shift left by 1px instead.
Example usage
window.scrollTo(0, 1); reflowFixedPositions();
Tweet
About the Author
David is a creative web developer and co-founder at 14islands.
You can follow David on Twitter
.
