css - 为什么在Webkit中旋转元素时html子元素消失？

Question

我试图在 html 中旋转一个容器 div，以便它的所有子元素都随之旋转。

document.addEventListener('DOMContentLoaded', function() {
  var img = document.createElement('img');
  var ctx = document.getElementById('canvas').getContext('2d');
  var n = 73; // -58
  var elContainer = document.getElementById('container');
  var elDegrees = document.getElementById('degrees');

  var setAngle = function(n) {
    elContainer.style.transform = ''.concat('rotate(', n, 'deg)');
    elDegrees.innerHTML = n;
  }; // /setAngle()

  document.getElementById('btnUp').addEventListener('mousedown', function() {
    n++;
    setAngle(n);
  });

  document.getElementById('btnDown').addEventListener('mousedown', function() {
    n--;
    setAngle(n);
  });

  img.onload = function() {
    ctx.drawImage(img, 0, 0, 640, 360);
  };
  img.src = 'https://blog.codepen.io/wp-content/uploads/2012/06/Made-For-Codepen.png';
  setAngle(n);
});

* {
  box-sizing: border-box;
  overflow: hidden;
}
#root {
  position: relative;
  width: 250px;
  height: 150px;
}
#container {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 250px;
  height: 150px;
  transform-origin: center center 0px;
  transform: rotate(90deg);
  transform-style: preserve-3d;
  background-color: #000000;
}
#child {
  background-color: #00ff00;
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  top: 60px;
  left: 60px;
  padding: 10px;
  z-index: 2;
}
#canvas {
  display: block;
  width: 250px;
  height: 150px;
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: 1;
}

<div id="root">

  <div id="container">
    <div id="child">
      TEXT ELEMENT
    </div>
    <canvas id="canvas" style="" width="640" height="360"></canvas>
  </div>

</div>

<button id="btnDown">-1 degree</button>
<button id="btnUp">+1 degree</button>
<span id="degrees"></span> degrees

<p>
  In Chrome or Safari, if the container is rotated greater than 73 degrees or less than -58 degrees, to absolute positioned child div with text disappears. Why?
</p>

出于某种原因，当容器 div 在 Chrome 或 Safari 中旋转超过 73 度或 -58 度时，子 div 元素会消失在 canvas 元素后面。 Canvas 元素和视频元素都会发生这种情况。这个问题在 Firefox 中不会发生。

Answer 1

您是否也尝试过对 child 进行相同的 webkit 轮换？可能漂浮 child 可能会有所帮助。不是 100% 确定。或者，您可能需要指定您在 webkit 中使用的浏览器。