Why does html child element disappears when rotating element in Webkit?
<p>I am trying to rotate a container div in html so that all of it's child elements rotate with it.</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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);
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="root"&gt;

  &lt;div id="container"&gt;
    &lt;div id="child"&gt;
      TEXT ELEMENT
    &lt;/div&gt;
    &lt;canvas id="canvas" style="" width="640" height="360"&gt;&lt;/canvas&gt;
  &lt;/div&gt;

&lt;/div&gt;

&lt;button id="btnDown"&gt;-1 degree&lt;/button&gt;
&lt;button id="btnUp"&gt;+1 degree&lt;/button&gt;
&lt;span id="degrees"&gt;&lt;/span&gt; degrees

&lt;p&gt;
  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?
&lt;/p&gt;</code></pre>
</div>
</div>
</p>

<p>For some reason when the container div is rotated past 73 degrees or -58 degrees in Chrome or Safari, the child div element disappears behind the canvas element. This happens with both canvas elements and video elements. This problem does not happen in Firefox.</p>