I have a "scene" div that contains a "plane" div perpendicular to the scene.
If I rotate the "scene" div on the Y axis by 90 degrees I should see the "plane" div in its entirety (as it happens Chrome) but Safari makes it disappear. The same happens at 270 degrees, but starts working past a full revolution of the scene (450deg, 630deg, etc.).
I tried setting some translateZ() on the elements but I think I didn't find the right combination.
Is there a way to make it work in at < 360deg?
(I actually encountered this behaviour in a more involved scenario, but I think this is the root cause of the problem)
edit: added a code snippet
const scene = document.querySelector(".scene");
const rotateBtn = document.querySelector(".rotate-btn");
let rotation = 0;
rotateBtn.addEventListener("click", () => {
rotation += 30;
scene.style.transform = `rotateY(${rotation}deg)`;
});* {
box-sizing: border-box;
}
body {
margin: 0;
}
.wrapper {
display: grid;
place-content: center;
height: 100vh;
perspective: 1000px;
}
.scene {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.plane {
position: absolute;
width: 20rem;
height: 30rem;
border: 1px solid black;
}
.plane-1 {
transform: translate(-50%, -50%);
background: red;
}
.plane-2 {
transform: translate(-50%, -50%) rotateY(90deg);
background: blue;
backface-visibility: visible;
}
.rotate-btn {
position: fixed;
top: 1rem;
left: 1rem;
padding: 1rem 2rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Safari 3D Test</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="wrapper">
<div class="scene">
<div class="plane plane-1"></div>
<div class="plane plane-2"></div>
</div>
</div>
<button class="rotate-btn">rotate</button>
</body>
</html>