<!DOCTYPE html>
<script>
onload = requestAnimationFrame(function() {
requestAnimationFrame(function() {
document.getElementById('badlayer').style.zIndex = "1"
});
});
</script>
<div style="float:right;position:relative;z-index:3">
This test is broken if this text shows up twice
</div>
<div style="width: 0">
<div style="height:220px;position:relative" id="badlayer">
<div style="transform: translateX(325px);">
</div>
</div>
<div style="height:220px;position:relative">
<div style="position: absolute; top: 0px; left: 0px; width:10px;height:10px; transform: translate3d(1px, 1px, 1px); background: lightgray"></div>
<div style="position: absolute; top: 0px; left: 0px; background: lightblue; width:10px;height:10px;" ></div>
</div>
a
</div>
<br>
<div style="position:relative; height: 500px;">
</div>