menu

A Fix for the iOS Orientationchange Zoom Bug

Posted by Scott on 01/05/2012

People enjoy the ability to pinch and zoom websites on their iPhones,
iPads, and iPod Touch devices. Unfortunately, a nasty usability bug
exists on iOS that causes a user-zoomable page to scale beyond the width
of the viewport when the device’s orientation changes from portrait to
landscape. As a result, the page ends up cropped by the viewport, and
users have to manually zoom the page back out again after changing
orientation: annoying at best, confusing at worst.

The bug has existed for years now; I submitted it to Apple a long, long
time ago (The bug report was immediately closed as “duplicate”, meaning
someone filed it even longer ago. Complementary example
here), but it has never been fixed, not in the
iOS4.x updates, and not in iOS5 either. Jeremy
Keith recently revived interest in its
demise through his post iWish, which
does a nice job of highlighting the history of the issue, and the
attempts at working around it so far (none of which quite work as we
need them to).

The common workaround is to disable the user’s ability to scale the
page, which of course fixes the bug by introducing a potentially worse
situation. Today, we’re offering a workaround that appears to fix the
issue without introducing more problems.

To test it out yourself, point an actual iOS device (not an emulator) to
this test
page.

The code for the demo can be found on
Github (check
the README file for a minified version). Just add the script to your
site and it should do it’s thing. Please fork and help improve the code,
if you’re so inclined!

This fix works by listening to the device’s accelerometer to detect when
an orientation change is about to occur. When it deems an orientation
change imminent, the script disables user zooming, allowing the
orientation change to occur properly, with zooming disabled. The script
restores zoom again once the device is either oriented close to upright,
or after its orientation has changed. This way, user zooming is never
disabled while the page is in use.

This fix has been tested on iOS 4 and 5, with expected results. Please
post your feedback below!

Comments

<div id="commentNumber1" class="commentEntry">

<p>I hereby declare Scott Jehl and Filament Group King of the Internet!

<p>I’m sorry if my comments above sounded harsh. I want to solve thus as much as anyone here. I just can’t see how to do it in all possible situations (see e.g. The zoom into a corner bug above).

I guess it also comes down to if you want to retain any zoom level between the modes at all and, if so, how they should behave. A good enough solution for me would be to always reset to 100% between mode changes, then (re)enable zoom.

When i go to landscape, scale, then turn back to portrait the page is stuck at > 1 zoom. To fix you just go back to landscape and then back to portrait. Would be nice to work on the first change to portrait.

<p>Nice fix! Just a quick note that the test page here: <a href="http://scottjehl.github.com/iOS-Orientationchange-Fix/" rel="nofollow">http://scottjehl.github.com/iOS-Orientationchange-Fix/</a> doesn’t work as it has the fix applied. But the test page here: <a href="http://filamentgroup.com/examples/iosScaleBug/" rel="nofollow">http://filamentgroup.com/examples/iosScaleBug/</a> replicates the bug. Had me scratching my head for awhile.

</div>
<p class="posted"><a href="#commentNumber16">Comment</a> by

Tama
on 01/09 at 07:42 PM

<div id="commentNumber17" class="commentEntry fg">

<p>Thanks for the feedback, everyone! If you noticed inconsistent behavior, please drop the fix in the tracker on Github.

Tama - good point. I’ll update the demo page so that it’s clearer that it’s not supposed to reproduce the original bug. Thanks!