150715 2015-10-30 01:17:56 -0700 Excessive enforced zoom when body is short and overflow:hidden (new iOS 9 breakage) 2016-08-29 23:50:09 -0700 1 1 1 Unclassified WebKit CSS Safari 9 iPhone / iPad iOS 9.0 RESOLVED DUPLICATE 152803 http://output.jsbin.com/sagowo HasReduction, InRadar P2 Normal --- 159753 1 webkit webkit-unassigned jacob simon.fraser webkit-bug-importer wenson_hsieh oldest_to_newest 1137829 0 webkit 2015-10-30 01:17:56 -0700 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. 1138177 1 wenson_hsieh 2015-10-31 11:16:49 -0700 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. 1138183 2 264481 wenson_hsieh 2015-10-31 12:06:30 -0700 Created attachment 264481 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. 1138188 3 webkit-bug-importer 2015-10-31 12:53:00 -0700 <rdar://problem/23345731> 1138195 4 webkit 2015-10-31 13:01:08 -0700 > 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 1138208 5 wenson_hsieh 2015-10-31 14:58:52 -0700 > 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. 1153666 6 jacob 2016-01-07 16:03:27 -0800 For those looking to work around this issue: html, body { height: 100%; } 1153669 7 simon.fraser 2016-01-07 16:13:44 -0800 Fixed via bug 152803. *** This bug has been marked as a duplicate of bug 152803 *** 1153721 8 webkit 2016-01-07 18:17:46 -0800 Wonderful! Removed the entry from Bootstrap's wall: https://github.com/twbs/bootstrap/commit/48e62fdf34c6f2a0a5c559e9b5e8318b7d86e654 264481 2015-10-31 12:06:30 -0700 2015-10-31 12:06:30 -0700 Reduced test case (standalone html) overflow-zoom-bug.html text/html 355 wenson_hsieh PG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoID0gZGV2aWNlLXdpZHRoIj4KPHN0 eWxlPgogICAgYm9keSB7CiAgICAgICAgaGVpZ2h0OiA1MHB4OyAvKiBSZW1vdmluZyB0aGlzIG1h a2VzIHVzIG5vdCB6b29tIGluIGFsbCB0aGUgd2F5LiAqLwogICAgICAgIG92ZXJmbG93OiBoaWRk ZW47IC8qIFJlbW92aW5nIHRoaXMgbWFrZXMgdXMgbm90IHpvb20gaW4gYWxsIHRoZSB3YXkuICov CiAgICB9Cjwvc3R5bGU+Cgo8Ym9keT4KICAgIDxwPldlJ3JlIHpvb21lZCBpbiBhbGwgdGhlIHdh eSBmb3Igbm8gYXBwYXJlbnQgcmVhc29uLCBhbmQgdGhlcmUncyBubyB3YXkgdG8gem9vbSBvdXQh PC9wPgo8L2JvZHk+Cg==