After upgrading my iOS devices to iOS 8.3 I noticed some weird behavior with the meta viewport initial scale property. If I set the initial scale under 1.0 and rotate my device while I am on a webpage, the whole content will get progressively smaller and eventually the browser will crash.
I noticed that the amount of how much smaller the content gets with each orientation change is linked to how much you set the initial scale. For example if I set it to 0.9, the content will get 10% smaller every time. If I set it to 0.6, the content will get 40% smaller every time.
Due to the nature of this bug, it cannot be put or experienced on jsfiddle. Instead I will paste the code right here so you can test it yourself somewhere:
<!doctype html>
<html>
<head>
<title>initial scale under 1.0</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, user-scalable=0" />
</head>
<body>
<div id = "wrapper">
<h1>Hello, run this page on iOS 8.3 device and change the orientation multiple times to make this text go smaller and eventually crash the browser!</h1>
</div>
</body>
</html>
You can compare that broken example with a working one, which has the initial-scale set to 1.0:
<!doctype html>
<html>
<head>
<title>initial scale 1.0</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
</head>
<body>
<div id = "wrapper">
<h1>This text will not get smaller nor will the browser crash when you rotate your device multiple times!</h1>
</div>
</body>
</html>
Before upgrading to iOS 8.3 the device rotation worked just fine. The layout neither get zoomed out or in nor did the browser crash after multiple orientation changes.
Is there a way to fix this issue?
