Как сделать 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));
}
< /code>
Но Macos Safari 18 не дает правильных значений для единиц VH < /code> -Style после активации PointerLock. Нажмите ESC (побег) один раз, чтобы уволить этот баннер. Нажмите ESC еще раз, чтобы раскрыть указатель мыши. Таким образом, в нижней части страницы есть белая полоса та же высота, что и баннер.




* {
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