ios 9 Safari / Web App Viewport Problem (expands to fit all elements in view)

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.

Replies

Thanks for this. During Beta 3 and 4 we had issues where our content would position and shift out of place too and scaling was acting weird.


With your workaround it was fine.


However, I noticed Apple did fix this as of Beta 5. So here is hoping it stays this way going forward.

Just in response to your comment on Beta 5... I didn't find this fixed in the Beta 5 release. Perhaps because it was a slightly different issue to what you were experiencing? So I still have the open bug report in with Apple.

Actually, this bug still exists on iOS 9.0 build 13A344 (which is the last "stable" build).

I have smiliar problem stable on ios9 with all browser😕

Bug reports aren't public, are they? Since this is a serious one and needs better discoverability (been searching for details on this for way too much of the day), can I suggest you copy your report to OpenRadar.com?

If anyone is still having this issue with iOS 9, here's an email I received from support.


For context, I sent them an example of a page with a large amount of text that overflowed outside of the initial viewport. That page also had the meta tags you described. On iOS 8, the scale was correct (set to 1) and I could scroll horizontally, but on iOS 9 it tried to zoom all the way out.


"

This page falls into a new behavior that was added to improve the behavior of pages when in iPad multi-tasking mode.


The page claims to have content that fits into the device width:

<meta name="viewport" content="width=device-width, initial-scale=1, min-scale=1, max-scale=1">

but then lies and lays out very wide, because of the unwrappable line of text.


On iOS 8, this page would have laid out with scale=1, but been horizontally scrollable.

On iOS 9, we now scale this page down to fit the viewport.


You can revert to the iOS 8 behavior by adding “shrink-to-fit=no” in the viewport meta tag.

"


Hopefully this helps those who googled or searched their way here.

Thank god I found this. Apple's change broke my mobile-optimized Web site, which has a slide-out reveal of the navigation. It was making the page scale down whenever the navigation was exposed, making everything tiny and harder to click on.


How does it help the iPad multi-tasking mode to ignore 'minimum-scale=1.0, maximum-scale=1.0'?


PS: I wouldn't need those two, if there was something like "zoom-to-fit=no" that prevented Safari from automatically zooming in when clicking in an input, or changing the zoom when rotating the device, or scaling iframes separately from the rest of the page.

adding “shrink-to-fit=no” in the viewport meta tag - this is what helped me!! Thank you Krepelk

I'm having a problem with flexbox on iOS9. See ieee-ac.org for an example.


It overlays and overprints columns that should have been stacked vertically. iOS8 works fine but not iOS9. Could it be the same problem that's described here?

Krepelk, you're a life-saver, “shrink-to-fit=no” worked a treat.

Note! adding shrink-to-fit=no seems to force minimum-scale=1


😠 Come on apple

Thanks Krepelk! You're a lifesaver or timesaver at the very least! I was thinking I would have to ditch my SlideshowPro Director powered galleries on my site (SP is defunct and not supported but the software still works if installed on your own hosting). I had tracked the problem down to the index.php for the mobile switched portion that doesnt use flash and couldn't work out what to do. At least I thought that was it.


Turns out I was right and a last do or die search on google related to IOS 9 came up with this page and your workaround.


So nice of Apple to create that bug. I hadn't been on my site for a while so it's been partly broken for a couple of months in all probability for those updated to 9.0. I wonder if the latest version has fixed the viewport problem?


So if anyone has a Slideshow Pro legacy powered site best check this out! :-)


PS. if you want a look: http://ianhomerphotography.co.uk/galleryindex.php

This is my first post on the developer forums. This looks like a big bug to me. Safari completely ignores width=device-width until…some sort of condition is met. Calling `window.innerWidth` within a `setTimeout` function seems to satisfy the criteria. Maybe it calculates device width after window load, and not on window load? `window.matchMedia` works correctly any time.


Test scenarios: http://pastebin.com/RJBbWMLB

I found a workaround.

https://gist.github.com/SKAhack/971edf3f5d1e950577ad