RESOLVED DUPLICATE of bug 152803 Bug 150715
Excessive enforced zoom when body is short and overflow:hidden (new iOS 9 breakage) 
https://bugs.webkit.org/show_bug.cgi?id=150715
Summary Excessive enforced zoom when body is short and overflow:hidden (new iOS 9 bre...
Chris Rebert
Reported 2015-10-30 01:17:56 PDT
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.
Attachments
Reduced test case (standalone html) (355 bytes, text/html)
2015-10-31 12:06 PDT, Wenson Hsieh 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Wenson Hsieh
Comment 1 2015-10-31 11:16:49 PDT
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.
Wenson Hsieh
Comment 2 2015-10-31 12:06:30 PDT
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.
Radar WebKit Bug Importer
Comment 3 2015-10-31 12:53:00 PDT
<rdar://problem/23345731>
Chris Rebert
Comment 4 2015-10-31 13:01:08 PDT
> 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
Wenson Hsieh
Comment 5 2015-10-31 14:58:52 PDT
> 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.
Jacob
Comment 6 2016-01-07 16:03:27 PST
For those looking to work around this issue: html, body { height: 100%; }
Simon Fraser (smfr)
Comment 7 2016-01-07 16:13:44 PST
Fixed via bug 152803. *** This bug has been marked as a duplicate of bug 152803 ***
Chris Rebert
Comment 8 2016-01-07 18:17:46 PST
Wonderful! Removed the entry from Bootstrap's wall: https://github.com/twbs/bootstrap/commit/48e62fdf34c6f2a0a5c559e9b5e8318b7d86e654
Note You need to log in before you can comment on or make changes to this bug.