Open Radar

 
Summary:

When the meta viewport tag is set to content="width=device-width,initial-scale=1", or any value that allows user-scaling, changing the device to landscape orientation causes the page to scale larger than 1.0. As a result, a portion of the page is cropped off the right, and the user must double-tap (sometimes more than once) to get the page to zoom properly into view.

When switching to portrait mode, the layout adapts perfectly. The issue only occurs in landscape. If the content attribute is adjusted with either user-scalable=no or maximum-scale=1, the problem goes away, but then scaling is disabled, which is undesirable.

Steps to Reproduce:

1. Open http://filamentgroup.com/examples/iosScaleBug/ in portrait orientation on an iOS device or emulator.
2. Change to landscape orientation

Expected Results:

The page should remain scaled at 1.0, and the page width should shrink to fit the viewport.

Actual Results:

The page is zoomed past 1.0, cropping a portion of the page from view and causing the content to be much too large.

Notes:

Developers should not have to disable user-scaling to enable smooth changes in orientation.

This bug only affects Mobile Safari: in-app web browsing (using webviews) doesn't display the same behaviour.

See also: http://adactio.com/journal/5088/