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, lily_spiniolas, 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

Matias Szylkowski
Reported 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.
Attachments
html demo'ing the bug (756 bytes, text/html)
2022-07-26 01:42 PDT, Derk-Jan Hartman 		no flags
Details
Screenshot of window showing scrollbar when using 100dvh (161.59 KB, image/png)
2022-07-26 01:43 PDT, Derk-Jan Hartman 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2022-07-14 13:28:23 PDT
<rdar://problem/97031866>
Derk-Jan Hartman
Comment 2 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
Derk-Jan Hartman
Comment 3 2022-07-26 01:43:23 PDT
Created attachment 461217 [details] Screenshot of window showing scrollbar when using 100dvh
Devin Rousso
Comment 4 2022-07-26 18:33:53 PDT
Pull request: https://github.com/WebKit/WebKit/pull/2765
EWS
Comment 5 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.
Devin Rousso
Comment 6 2022-07-28 12:13:07 PDT
*** Bug 243066 has been marked as a duplicate of this bug. ***
Sam Sneddon [:gsnedders]
Comment 7 2022-08-01 03:19:09 PDT
This actually regressed in 15.6.
Note You need to log in before you can comment on or make changes to this bug.