Bug 242758 - REGRESSION (Safari 15.6): Dynamic viewport units (dvh) not matching viewport height
Summary: REGRESSION (Safari 15.6): Dynamic viewport units (dvh) not matching viewport ...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: Mac (Intel) macOS 12
: P2 Normal
Assignee: Devin Rousso
URL:
Keywords: InRadar
: 243066 (view as bug list)
Depends on: 237979 238673
Blocks:
  Show dependency treegraph
 
Reported: 2022-07-14 11:01 PDT by Matias Szylkowski
Modified: 2022-08-01 03:19 PDT (History)
4 users (show)

See Also:


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

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