Fixing position:fixed elements stuck in the middle of the...

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

Other Posts

Updating File Create Date From Exif Data

When exporting photos from a service like Flickr, perhaps after they've given notice that they're going to delete our photos if you don't subscribe to......

All Truthy and Falsy Javascript Values In Nodejs, every value has an associated boolean, true or false, value. For example, a null value has an......

Google Forcing Nest Cameras Visual Indicator Light To Be On Received the following email from Google today... Full email text... Recently, we shared our commitment......

Posting to Twitter with Python - Part Two: Posting Photos NOTE: This is part two of my posting to Twitter with Python tutorial. If you......

Doubleclick to open a file in VIM from OSX I use VIM for just about everything from note taking to coding to keeping track of......

Sign Into Gmail Without Signing Into Google Chrome Unfortunately, Google has made changes to Chrome since this blog post was posted which removed the options......