Level 1 (0 points)
The viewport is set incorrectly when the viewport meta tag is specified with initial-scale = 1 or width=device-width, and the page contains an element (e.g. div tag) that is wider than the desired viewport's boundary.
For example:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
</head>
<body style="border: 2px solid red;">
<h1>Test 3 </h1>
<p>content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"</p>
<p>Test body: Red </p>
<div style="width: 740px; border: 2px solid orange;">
<p>Test content: Orange div, width: 740px;</p>
</div>
<div style="width: 1000px; border: 2px solid blue;">
<p>Test content: Blue div, width: 1000px;</p>
</div>
<div style="width: 1400px; border: 2px solid green;">
<p>Test content: Green div, width: 1400px</p>
</div>
</body>
</html>
In this case the viewport is zoomed out so the screen width shows all of the wider 1400px div. It should be set at 1024px in landscape and 768px in portrait (and this is how it has been in previous versions, including 8.4.1).
iOS 9 (screenshot should appear below)
iOS 8.4 (screenshot should appear below)
I have logged a bug report.
My apps use wider-than-screen elements to slide around under user interacation - hence my need for this to work properly.
I believe a workaround might be to set the initial-scale to 1.00001 and have no width set.
<meta name="viewport" content="initial-scale=1.0001, minimum-scale=1.0001, maximum-scale=1.0001, user-scalable=no"/>
If anyone has any other information on this I'd be grateful if you could share it.
