title: Chrome CSS bug: "translate3d" inside a rotated element does not obey "overflow: hidden"
body: <p>Take a look at this <a href="http://codepen.io/markduane/pen/RPNyQa" rel="nofollow">CodePen</a> to see what I mean:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.perspective-container {
    margin: 50px 0;
    perspective: 1000px;
    perspective-origin: 0 50%;
  }
  .card {
    border: 10px solid blue;
    width: 300px;
    height: 300px;
    overflow: hidden;
    transform: rotateY(-45deg);
  }
  .card-inner {
    width: 300px;
    height: 300px;
    overflow: hidden;
  }
  .scroller {
    transform: translate(0, -100px);
  }
  .scroller-3d {
    transform: translate3d(0, -100px, 0);
  }
  .will-change {
    will-change: transform;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;Incorrect (uses will-change):&lt;/h1&gt;
  &lt;div class="perspective-container"&gt;
    &lt;div class="card"&gt;&lt;div class="card-inner"&gt;
      &lt;div class="scroll-container"&gt;
        &lt;div class="scroller will-change"&gt;
          &lt;img src="https://images2.pixlis.com/background-image-horizontal-lines-and-stripes-seamless-tileable-grey-black-22hnju.png" /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;h1&gt;Incorrect (uses translate3d):&lt;/h1&gt;
  &lt;div class="perspective-container"&gt;
    &lt;div class="card"&gt;
      &lt;div class="scroll-container"&gt;
        &lt;div class="scroller-3d"&gt;
          &lt;img src="https://images2.pixlis.com/background-image-horizontal-lines-and-stripes-seamless-tileable-grey-black-22hnju.png" /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;h1&gt;Correct (uses neither translate3d or will-change):&lt;/h1&gt;
  &lt;div class="perspective-container"&gt;
    &lt;div class="card"&gt;
      &lt;div class="scroll-container"&gt;
        &lt;div class="scroller"&gt;
          &lt;img src="https://images2.pixlis.com/background-image-horizontal-lines-and-stripes-seamless-tileable-grey-black-22hnju.png" /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have a rotated element with perspective applied, inside of which I have a 'scrolling' div which is transformed vertically (imagine a magazine page-turn experience with scrolling divs inside each page). I added <code>will-change: transform</code> to the inner div and that broke the outer container <code>overflow: hidden</code>. This seems to be a bug with the Chrome compositor. </p>
  
  <p>Does anyone know of any workarounds? I would like to keep the <code>will-change</code> attribute because it significantly speeds-up animations on mobile Chrome.</p>
  
  <p><strong>Edit:</strong> It looks like this is not specific to the will-change property but any property that makes the inner div its own compositing layer. When I remove the <code>will-change</code> property but change the transform to a <code>translate3d</code> that similarly improves performance and exhibits the bug. The only class on the inner div that allows the rotated parent to correctly render <code>overflow: hidden</code> is the one that adds the 2D transform.</p>