Bug 212982

Summary: Viewport Unit based element clipped by Safari bottom controls
Product: WebKit Reporter: David Bokan <bokan>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: bfulgham, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 13   
Hardware: iPhone / iPad   
OS: iOS 13   
URL: https://bokand.github.io/demo/urlbarsize.html
Attachments:
Description Flags
Demonstrating the issue none

Description David Bokan 2020-06-09 12:16:37 PDT 
Created attachment 401460 [details]
Demonstrating the issue

Repro steps:

1. Visit https:/bokand.github.io/demo/https://bokand.github.io/demo/urlbarsize.html
2. See the second bar from the right, "viewport-unit position:fixed". This is a 99vh position:fixed element
3. Scroll down a little so that the URL bar and bottom controls start to hide, but not so much that they're fully hidden.

What should happen:
The element's height indicates that it should extend behind the bottom controls

What happens instead:
The part of the element that is behind the bottom controls isn't rendered when revealed

The value in parenthesis in the bar is the getBoundingClientRect height. Based on that value, the fixed-vh bar should be the same height as the absolute-vh bar but it appears that the fixed one is clipped out.

Once the controls are fully hidden and a resize/layout occurs, the bar becomes visible.

Note: the position-fixed bar is expected to be shorter as it getBoundingClientRect height shorter while the controls are showing.
Comment 1 Simon Fraser (smfr) 2020-06-09 15:20:13 PDT 
This is the age-old conundrum of whether 100vh should be sized for visible UI, or collapsed UI, right?
Comment 2 David Bokan 2020-06-09 16:13:33 PDT 
Not quite, I think this is a rendering/compositing issue.

The conundrum is whether layout should cause 100vh to use the collapsed or visible UI rect. In this case, the layout system has decided that the 100vh-fixed element should use the collapsed UI rect (as confirmed from getBoundingClientRect - this decision matches Chrome). However, as the UI is collapsed, the element appears to be clipped (probably a compositing issue) to a visible UI rect so it doesn't appear to be filling the collapsed rect, even though you'd expect it to based on its layout dimensions.
Comment 3 David Bokan 2020-06-09 16:16:21 PDT 
Just noticed I malformed the URL in the OP - it should be https://bokand.github.io/demo/urlbarsize.html

Also, I attached a video showing the issue. Based on the dimensions, the left most and 2nd from right bars should remain the same height throughout. That happens only once the UI is fully collapsed.
Comment 4 Simon Fraser (smfr) 2020-06-09 16:20:03 PDT 
I see it. There's some clipping layer that we resize at some point.
Comment 5 Radar WebKit Bug Importer 2020-06-09 17:35:54 PDT 
<rdar://problem/64188289>