Fixing position:fixed elements stuck in the middle of the page on iPhone Safari

We ran into an annoying bug over at Gigwalk while building a mobile webapp running inside Phonegap. We have a toolbar at the top of all our pages which is set to position:fixed, but every once in a while it would get stuck in the middle of the page. We tried several different proposed solutions, but this one worked for us. Run the following function after the page loads and it will force Safari to re-orient it's elements and puts the position:fixed toolbar back where it was supposed to go.

var fixPositionFixedElements = function(elem){
	elem = elem || document.documentElement;

	// force a reflow by increasing size 1px
	var width = elem.style.width,
		px = elem.offsetWidth+1;

	elem.style.width = px+'px';

	setTimeout(function(){
			// undo resize, unfortunately forces another reflow
			elem.style.width = width;
			elem = null;
	}, 0);
};
Post A Twitter Response To This Blog Post

To: @mattccrampton

0