Bug 242758

Summary: REGRESSION (Safari 15.6): Dynamic viewport units (dvh) not matching viewport height
Product: WebKit Reporter: Matias Szylkowski <mszylkowski>
Component: CSSAssignee: Devin Rousso <hi>
Status: RESOLVED FIXED    
Severity: Normal CC: dev, hartman.wiki, hi, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Mac (Intel)   
OS: macOS 12   
Bug Depends on: 237979, 238673    
Bug Blocks:    
Attachments:
Description Flags
html demo'ing the bug
none
Screenshot of window showing scrollbar when using 100dvh none

Description Matias Szylkowski 2022-07-14 11:01:15 PDT 
On Safari 15.4 and 15.5 Desktop the dynamic viewport units were introduced and worked properly (they matched the viewport height). Currently on Safari 16.0 (Technology Preview) the dvh unit works differently than it does in 15.4/15.5, as `100dvh` is 80px larger than `100%` or `100vh` when there are multiple tabs opened, and 52px larger when there are no other tabs opened in the browser.

This seems to be an issue with the way the `dvh` unit is calculated, which now does not subtract properly the size of the nav bar (and tabs if there are multiple tabs opened).

I have a demo that shows the difference at https://browser-units.web.app, where red boxes mean the units don't match `100%` (and green means it matches). On Safari 15.5 the dvh units are green, while on Safari TP 16.0 the dvh units are red.
Comment 1 Radar WebKit Bug Importer 2022-07-14 13:28:23 PDT 
<rdar://problem/97031866>
Comment 2 Derk-Jan Hartman 2022-07-26 01:42:08 PDT 
Created attachment 461216 [details]
html demo'ing the bug

This is now also a problem on Safari 15.6 for Desktop.

I've included my testcase as well (note that unlike with the original posters' demo, the colors don't have particular meaning, they are just to show the different modes).

I'll also attach screenshots
Comment 3 Derk-Jan Hartman 2022-07-26 01:43:23 PDT 
Created attachment 461217 [details]
Screenshot of window showing scrollbar when using 100dvh
Comment 4 Devin Rousso 2022-07-26 18:33:53 PDT 
Pull request: https://github.com/WebKit/WebKit/pull/2765
Comment 5 EWS 2022-07-27 13:53:40 PDT 
Committed 252878@main (cd186d735bf2): <https://commits.webkit.org/252878@main>

Reviewed commits have been landed. Closing PR #2765 and removing active labels.
Comment 6 Devin Rousso 2022-07-28 12:13:07 PDT 
*** Bug 243066 has been marked as a duplicate of this bug. ***
Comment 7 Sam Sneddon [:gsnedders] 2022-08-01 03:19:09 PDT 
This actually regressed in 15.6.