Bug 212982 - Viewport Unit based element clipped by Safari bottom controls
Summary: Viewport Unit based element clipped by Safari bottom controls
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 13
Hardware: iPhone / iPad iOS 13
: P2 Normal
Assignee: Nobody
URL: https://bokand.github.io/demo/urlbars...
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-06-09 12:16 PDT by David Bokan
Modified: 2020-06-09 17:35 PDT (History)
4 users (show)

See Also:


Attachments
Demonstrating the issue (14.10 MB, video/mp4)
2020-06-09 12:16 PDT, David Bokan
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
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>