Как сделать Safari обновление CSS переменные после исчезновения баннера Pointerlock? ⇐ CSS

[Anonymous]

Я хочу применить преобразование, используя высоту экрана в качестве переменной в расчете: < /p>

Код: Выделить всё

.rotated {
--viewport-width: 100dvw;
--viewport-height: 100dvh;
transform-origin: top right;
transform: rotate(90deg) scale(calc(var(--viewport-height) / var(--viewport-width))) translateX(100%);
bottom: calc(-1 * var(--viewport-width) * var(--viewport-width) / var(--viewport-height) - var(--viewport-height));
}

Но macOS Safari 18 не выдает правильные значения для единиц измерения в стиле vh после активации блокировки указателя.
Когда вы активируете блокировку указателя, macOS Safari 18 отображает баннер:

Указатель мыши скрыт. Нажмите Esc (Escape) один раз, чтобы закрыть этот баннер. Нажмите Esc еще раз, чтобы отобразить указатель мыши.

Когда вы нажимаете Esc (или, в моей демонстрации, щелкаете, чтобы выйти из режима блокировки указателя), баннер исчезает, но значения CSS, такие как 100vh, по-прежнему сообщают высоту, которой была область просмотра, когда там был баннер. Поэтому внизу страницы есть белая полоса той же высоты, что и баннер.
Вот одностраничный HTML-файл, демонстрирующий проблему:

Код: Выделить всё

* {
margin: 0;
padding: 0;
}

#container {
height: 100dvh;
width: 100dvw;
background-color: blue;
}





document.addEventListener('click', () => {
if (document.pointerLockElement === document.body) {
document.exitPointerLock();
} else {
document.body.requestPointerLock();
}
});

Подробнее здесь: https://stackoverflow.com/questions/797 ... disappears