Wie mache ich Safari -Update -CSS -Variablen nach dem Verschwinden des Zeigerbanners? ⇐ JavaScript

[Anonymous]

Ich möchte eine Transformation unter Verwendung der Höhe des Bildschirms als Variable in einer Berechnung anwenden: < /p>

Code: Select all

.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>
Aber macOS safari 18 enthält nicht die richtigen Werte für VH < /code> -Stileinheiten, nachdem Zeigerlock aktiviert wurde. Drücken Sie ESC (Escape) einmal, um dieses Banner zu entlassen. Drücken Sie ESC erneut, um Ihren Mauszeiger zu enthüllen. Es gibt also eine weiße Balken am unteren Rand der Seite wie die gleiche Höhe wie das Banner.




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