Bug 242758 – REGRESSION (Safari 15.6): Dynamic viewport units (dvh) not matching viewport height

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

[Matias Szylkowski]

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.

[Radar WebKit Bug Importer]

<rdar://problem/97031866>

[Derk-Jan Hartman]

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]

Created attachment 461217 [details]
Screenshot of window showing scrollbar when using 100dvh

[Devin Rousso]

Pull request: https://github.com/WebKit/WebKit/pull/2765

[EWS]

Committed 252878@main (cd186d735bf2): <https://commits.webkit.org/252878@main>

Reviewed commits have been landed. Closing PR #2765 and removing active labels.

[Devin Rousso]

*** Bug 243066 has been marked as a duplicate of this bug. ***

[Sam Sneddon [:gsnedders]]

This actually regressed in 15.6.