70-480 Transform affecting fixed children
Apparently setting a transform creates a new Stacking Context even for "Fixed" children...
by Jeroen Heijmans
HTML
Outer test
<div id="inner">
INNER
<div id="fixed">
FIXED
</div>
</div>
<button onclick="javascript:toggleClass()">Toggle "rotate(0deg)" on inner div</button>
CSS
div {
border: 1px solid gray;
margin: 8px;
}
#fixed {
position: fixed;
top: 0;
right: 50%;
}
.explicitZeroRotation {
-webkit-transform: rotate(0deg);
}
JavaScript
function toggleClass() {
var el = document.getElementById('inner');
el.className === "explicitZeroRotation" ? el.className = "" : el.className = "explicitZeroRotation";
}