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

[Anonymous]

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

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

.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();
}
});

Как я могу использовать CSS/JavaScript/HTML, которыми я управляю, для решения этой проблемы?
Используя top и дно вместо vh заставляет элемент div всегда отображаться в полноэкранном режиме:

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

#container {
/* height: 100dvh; */
position: absolute;
top: 0;
bottom: 0;
width: 100dvw;
background-color: blue;
}

Но я не знаю, как обойти проблему браузера, например, если бы я мог получить расстояние между нижней частью координаты y: 0 и верхней частью координаты y: 0, я думаю, я мог бы вместо этого включить это в расчет, но я не знаю, как это сделать.
>

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