SVH units not working properly in mobile Safari

Mobile Safari is not distinguishing between the CSS units svh and dvh. These units
should yield different heights with the viewport expanded (toolbars retracted), however instead they are yielding the same height.

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.

Test page

This snippet illustrates the bug, as does this webpage. Note that the bug is only visible when using mobile Safari (on an iPhone or iPad, or using the Simulator which comes with Xcode).

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

body {
  display: flex;
  gap: 1em;
  margin: 0 2em;
}
div {
  border: 5px solid red;
  box-sizing: border-box;
  width: 5em;
  padding-top: 1em;
  text-align: center;
}
div:nth-child(1) {
  background: cyan;
  height: 100vh;
}
div:nth-child(2) {
  background: yellow;
  height: 100svh;
}
div:nth-child(3) {
  background: lime;
  height: 100dvh;
}
div:nth-child(4) {
  background: pink;
  height: 100lvh;
}

<!-- language: lang-html -->

<div>100vh</div>
<div>100svh</div>
<div>100dvh</div>
<div>100lvh</div>

<!-- end snippet -->

Expected behaviour

As the toolbars are collapsed and expanded, the only element which should change size is the one sized with <code>dvh</code> 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 <code>svh</code> and <code>dvh</code> should both exactly fit the viewport, and the element sized with <code>lvh</code> should be larger than the viewport.

When viewing the page in the large viewport (toolbars collapsed), the elements sized with <code>dvh</code> and <code>lvh</code> should both exactly fit the viewport, and the element sized with <code>svh</code> should be smaller than the viewport.

To put it another way, the yellow element should be <strong>short</strong>, the pink element should be <strong>long</strong>, and the lime
element should switch between short and long.

Actual behaviour

As the toolbars are collapsed and expanded (using the Hide Toolbar menu option), both the elements sized with <code>svh</code> and <code>dvh</code> 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.

This is a bug in the browser’s rendering engine and it has been reported to Apple.

UPDATE

I initially reported this using Apple’s Feeback Assistant; reports lodged this way are not available publicly. However, I have just discovered that WebKit has a public Bugzilla system, so I have created this ticket for the issue.