Bug 150715

Summary: Excessive enforced zoom when body is short and overflow:hidden (new iOS 9 breakage)
Product: WebKit Reporter: Chris Rebert <webkit>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: jacob, simon.fraser, webkit-bug-importer, wenson_hsieh
Priority: P2 Keywords: HasReduction, InRadar
Version: Safari 9   
Hardware: iPhone / iPad   
OS: iOS 9.0   
URL: http://output.jsbin.com/sagowo
Bug Depends on:    
Bug Blocks: 159753    
Attachments:
Description Flags
Reduced test case (standalone html) none

Description Chris Rebert 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.
Comment 1 Wenson Hsieh 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.
Comment 2 Wenson Hsieh 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.
Comment 3 Radar WebKit Bug Importer 2015-10-31 12:53:00 PDT 
<rdar://problem/23345731>
Comment 4 Chris Rebert 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
Comment 5 Wenson Hsieh 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.
Comment 6 Jacob 2016-01-07 16:03:27 PST 
For those looking to work around this issue:

html, body {
  height: 100%;
}
Comment 7 Simon Fraser (smfr) 2016-01-07 16:13:44 PST 
Fixed via bug 152803.

*** This bug has been marked as a duplicate of bug 152803 ***
Comment 8 Chris Rebert 2016-01-07 18:17:46 PST 
Wonderful!
Removed the entry from Bootstrap's wall: https://github.com/twbs/bootstrap/commit/48e62fdf34c6f2a0a5c559e9b5e8318b7d86e654