为什么在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元素后面。画布元素和视频元素都会发生这种情况。 Firefox中不会发生此问题。

Answer 1

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