title: Why does setting overflow:hidden; break the backface-visibility declaration?
body: <p>I have a "flippable" modal dialogue consisting of two divs (front and back):</p>
  
  <pre><code>&lt;div class="modal-dialogue"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="front"&gt;
               &lt;h1&gt;Front&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div class="back"&gt;
               &lt;h1&gt;Back&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Using CSS transform I flip the modal over to reveal the back by adding the "flipped" class to the modal-content with:</p>
  
  <pre><code>.modal-content.flipped {
      -webkit-transform: rotateY(180deg);
  }
  </code></pre>
  
  <p>This all works fine... <em>except</em> when I add the overflow:hidden; property to the modal-content. Suddenly, the back div is not visible and instead the backface of the front div becomes visible (even though it has backface-visibility set to hidden).</p>
  
  <p>This seems very strange. Why would setting the overflow property change the backface-visibility in this way? </p>
  
  <p>You can see it in action in this fiddle: <a href="https://jsfiddle.net/amxp02mx/" rel="noreferrer">https://jsfiddle.net/amxp02mx/</a> . It works fine, but if you comment out line 31 in the CSS, making the overflow:hidden, it is broken.</p>
  
  <p>Can anyone explain why?</p>