Steps to reproduce: 1. Open http://output.jsbin.com/sagowo in iOS 9 Safari. 2. Tap the blue button to make the Bootstrap modal dialog appear. Actual result: In iOS 9, some kind of automatic zooming kicks in and the page gets *way* too zoomed in (e.g. an <input> takes up ~1/4th of the vertical space of the viewport), and there's no way to zoom out, even though user-scalable=no has NOT been specified. Expected result: Either no extra zoom or a reasonable amount of zoom should be applied. Other notes: This used to work fine in iOS 8.4. iOS 9 has caused this to break somehow.
Similar to <http://wkbug.com/146244>, this is related to how the <body> height is being computed as a very small value. This can be verified in jsbin test case by putting height: 100vh on the <body> and seeing that the excessive zoom doesn't occur. It would be useful to know what heights Chrome and Firefox on mobile compute for the <body> element. On desktop, Safari, Chrome and Firefox all compute the body height to be about 46px, so I would guess it's the same for mobile, but it would definitely be good to double check. I suppose a temporary workaround for both this issue and <http://wkbug.com/146244> is forcing the body element to cover the page, but for an actual fix, we need to know whether having a tiny/very short <body> is something we should support. If not, we need to figure out what's causing us to compute body height to be such a small value; otherwise, we'll need to adjust the way we handle various iOS-specific behaviors (e.g. zooming and input assistance) to do the right thing even when the body element is tiny.
Created attachment 264481 [details] Reduced test case (standalone html) The problem with the Bootstrap modals is reproducible by doing two things without using Bootstrap or jQuery: 1. Set a small (~50px) height on the <body> 2. Set overflow: hidden on the <body> Observe that we start zoomed in to the text at max scale, and there's no way to zoom out. Again, we have to figure out if we're computing the height correctly, and if so, we'll need to make our zooming heuristic account for this.
<rdar://problem/23345731>
> It would be useful to know what heights Chrome and Firefox on mobile compute for the <body> element. For the Bootstrap example, with the modal opened, Android Chrome gives: document.body.clientHeight: 46px document.body.offsetHeight: 46px document.body.scrollHeight: 1396px
> document.body.clientHeight: 46px > document.body.offsetHeight: 46px Thanks for the fast response! I'm observing the same thing on mobile Safari. It looks like the tiny <body> height might not be so crazy after all, and WebKit should handle this case in a better way.
For those looking to work around this issue: html, body { height: 100%; }
Fixed via bug 152803. *** This bug has been marked as a duplicate of bug 152803 ***
Wonderful! Removed the entry from Bootstrap's wall: https://github.com/twbs/bootstrap/commit/48e62fdf34c6f2a0a5c559e9b5e8318b7d86e654