title: Safari rotate3d GPU composition bug
body: <p>When applying transform: rotate3d(x, y, z, angle) on a block element with z-index: 2 absolutely positioned above an absolutely positioned canvas with z-index: 1, I get this weird GPU composition bug in Safari where a part of the block element isn't rendered (or maybe below the canvas). I've made a <a href="http://jsfiddle.net/mzkvY/4/" rel="nofollow">demo</a> that clearly demonstrates the bug in Safari. It works fine in Firefox and Chrome. The CSS is as follows:</p>
  
  <pre><code>#container {
      position: relative;
  }
  
  #canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 500px;
      height: 500px;
      z-index: 1;
  }
  
  #overlay {
      position: absolute;
      z-index: 2;
      top: 100px;
      left: 300px;
      width: 300px;
      height: 300px;
      background-color: #000;
      -webkit-transform: rotate3d(1, 0, 0, -20deg);
  }
  </code></pre>
  
  <p>Can anyone shed some light on why this is happening and maybe supply a potential fix? I've tried almost everything from applying translate3d(0, 0, 0) to changing the globalCompositeOperation of the canvas. It's worth noting if I replace the canvas with a block element that has a background image instead, the bug doesn't appear. It must have something to do with the canvas.</p>
  
  <p>I'm using Safari 7.0.5 on Mac OS X 10.9.4.</p>
  
  <p>Looking forward to hearing from you – thanks!</p>