Sam MacPherson

Flash, Haxe, Game Dev and more…

Monthly Archives: July 2013

iOS Safari Mobile Absolute Position Bug

This bug has gotten me twice with two separate HTML5 games so I figured I’d share. Seeing as most cross-platform HTML5 games have to run on a bunch of different screen resolutions it’s fairly common to see games resize a canvas to fit the screen. It’s for this reason that we need to be able to accurately determine the width and height available to us.

If you are just using a canvas element then you should be fine, but a lot of the time I’m seeing absolutely positioned elements above the canvas (such as for text display). The problem comes in when you move an absolutely positioned element off the screen – even partially. Most browsers respect that absolutely positioned elements should not affect the dimensions of the parent element, but for iOS Mobile Safari this is not the case. Off screen absolute elements will change the dimensions of the page and cause width and height measurements to be wrong which in turn causes the canvas to resize to an amount larger than the screen.

Until they fix this it seems the only solution I could find was to change position: absolute to position: fixed for these elements. As long as the page doesn’t move it will produce the same effect. Cheers.