Mobile Safari is not distinguishing between the CSS units svh and dvh. These units
should yield different dimensions in certain circumstances, however, instead they are yielding the same
dimensions in all circumstances.
Safari support for these units was announced in the WebKit blog around a year ago. These units are described in the specification CSS Values and Units Module Level 4.
This test page contains four elements, each of which is sized using a different unit.
The first element is sized as 100vh, the second as 100svh, the third as
100dvh and the fourth as 100lvh.
As the toolbars are collapsed and expanded, the only element which should change size is the one sized with
dvh units (the lime coloured element).
The other three elements should maintain a fixed size.
When viewing the page in the small viewport (toolbars expanded), the elements sized with svh and dvh
should both exactly fit the viewport, and the element sized with lvh should be larger than the viewport.
When viewing the page in the large viewport (toolbars collapsed), the elements sized with dvh and lvh
should both exactly fit the viewport, and the element sized with svh should be smaller than the viewport.
To put it another way, the yellow element should be short, the pink element should be long, and the lime element should switch between short and long.
As the toolbars are collapsed and expanded (using the Hide Toolbar menu option), both the elements sized with svh and dvh change their size. Interestingly,
the yellow element changes size immediately and the lime element adjusts a split second later. However, point here is that the
yellow element should not be changing its size at all.
Here is a screenshot video illustrating this incorrect behaviour of mobile Safari. Captured on an iPhone running iOS 16.4.1.