<!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>