CSS `vh` & `dvh` units do not update when tab bar is shown or hidden

adamaveray

Elements with heights set in vh or dvh units do not resize when the horizontal tab bar is shown or hidden – the window must then be resized for the elements to also update.

Version 0.99.126.4.1-beta (WebKit 618.1.2)

Sonoma (14)

Vlad

adamaveray Can you compare with Safari?

adamaveray

Vlad It looks like Safari also suffers from the tab bar bug (there's already an open bug report for that), so both browsers exhibit incorrect behaviour in that regard. Chrome and Firefox both behave correctly at least (both browsers have an always visible tab bar so I'm replicating the test with the bookmarks bar, which causes the same issue in Orion & Safari).

Safari:

Chrome:

Firefox:

adamaveray

Elements with dimensions set as svh, lvh, svw or lvw (or their logical equivalents e.g. svb) do not update when a window is resized (e.g. min-height: 100svh).

It appears Orion calculates the dimensions when a tab is created, then uses that original value for the lifetime of that tab regardless of any resizing even after refreshes or navigation. Creating a new tab in the same window uses the new dimensions of the window at that time

The units vh, vw, dvh & dvw (and logical equivalents) work correctly.

Orion (incorrect behaviour):

Safari (correct behaviour):

This demonstrates each tab remembers the window size when it was created, separate from other tabs:

Version 0.99.126.4.1-beta (WebKit 618.1.2)

Sonoma (14)

Vlad

adamaveray if something is common with safari and you believe it is a bug, then please report to webkit.org

if there is different behavior, please let us know.

adamaveray

Vlad It's not a Webkit issue; it's a browser issue with the browser not notifying the inner Webkit view of changes to the viewport (unless Webkit provides the tab bar UI, but I don't think that's the case?).

The other merged issue here is very clearly an Orion issue where resizing a window doesn't update the svh and lvh values – no other browser suffers from that issue including Safari.

Both issues combine to make Orion non-compliant with these web standards and breaks rendering websites that use these standard CSS values.

dino

@adamaveray can you please share these test resources with us, so will be easier for us to fix and test

adamaveray

dino Sure, here's the page I made to test the 4 viewport height units:

testhtml.zip

1kB

(It manually calculates the heights for debug feedback on each animation frame instead of using callbacks to ensure the values update even if window resize events aren't being triggered, but the heights themselves are solely determined by CSS so aren't impacted by any Javascript)