title: z-index vs translate3D on Chrome
body: <p>I decided to use:</p>
  
  <pre><code>* {
      -webkit-transform: translate3d(0px, 0px, 0px);
  }
  </code></pre>
  
  <p>when I saw that it makes my animations much smoother, probably because it forces hardware acceleration. But I also need to make some <code>z-index</code> tweaks in order to place a shape in front of a text, to <code>mask</code> that text at some point of an animation. The thing is: my (grey) shape must move synced with another shape (the green one in the example below), which is behind the text.</p>
  
  <p>I built a simple <a href="http://jsfiddle.net/izaiasdotcom/8Zs4e/" rel="nofollow">example</a> to make it more visual. It works nicely on Firefox, but I just can't get it working on Chrome and Safari. Well, it works if I remove the translate3d thing, but since my actual project requires lots of sliding and smooth animations, the user experience would suffer if I did that.</p>