Why does html child element disappears when rotating element in Webkit? - css

Question

I am trying to rotate a container div in html so that all of it's child elements rotate with it.
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>
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.

Answer 1

Have you tried putting the same webkit rotation on the child too? And possibly floating the child might help. Not 100% sure. Or, you may need to specify which browsers you are using within the webkit.