Safari中rotateY(90deg)旋转时元素消失问题求助

大家好，我遇到了一个Safari浏览器里的3D变换问题，想请教下有没有解决办法：

我有一个名为scene的div，里面包含一个与它垂直的planediv。当我把scenediv绕Y轴旋转90度时，Chrome里能完整看到这个planediv，但Safari里它直接消失了。270度旋转时也是同样的情况，但当scene旋转超过一整圈（比如450deg、630deg这类角度）之后，又能正常显示了。

我试过给元素添加translateZ()属性，但好像没找到正确的组合方式。有没有办法让它在旋转角度小于360度时也能正常工作呢？

（这个问题其实是在更复杂的场景中发现的，但我认为这就是问题的根本原因）

补充的代码片段： #

HTML代码：

<!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>

CSS代码：

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

JavaScript代码：

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)`;
});

备注：内容来源于stack exchange，提问作者Mauro