title: chrome: why does css 3d transform on large elements with transform scale < 0 cause white screen bug?
body: <p>I am having an issue with regions of the screen becoming white in chrome. Below is a simplified test case. 
  From the tests, it appears conclusive that a combination of transform scale and rotate is causing the issue. To reproduce the issue with few html elements, I exaggerated the situation and used a 5000px square scaled down by 0.125.</p>
  
  <p>Notice that only the first test reproduces the bug,a and it does not reproduce in firefox.</p>
  
  <p>with scale down:
  <a href="http://jsfiddle.net/AxkEj/46/embedded/result/" rel="nofollow">http://jsfiddle.net/AxkEj/46/embedded/result/</a></p>
  
  <pre><code>   width: 5000px;
     height: 5000px;
     -webkit-transform: scale(0.125);
  </code></pre>
  
  <p>without scale:
  <a href="http://jsfiddle.net/47SmB/1/embedded/result/" rel="nofollow">http://jsfiddle.net/47SmB/1/embedded/result/</a></p>
  
  <pre><code>   width: 625px;
     height: 625px;
  </code></pre>
  
  <p>with scale up:
  <a href="http://jsfiddle.net/YpfPt/2/" rel="nofollow">http://jsfiddle.net/YpfPt/2/</a></p>
  
  <pre><code>   width: 50px;
     height: 50px;
     -webkit-transform: scale(10);
  </code></pre>
  
  <p>with zoom instead of scale:</p>
  
  <pre><code>    width: 5000px; 
      height: 5000px;
      zoom: 0.125;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/AxkEj/47/" rel="nofollow">http://jsfiddle.net/AxkEj/47/</a></p>
  
  <p><a href="https://bugs.webkit.org/show_bug.cgi?id=110056" rel="nofollow">bug report to webkit with response</a></p>
  
  <p><a href="http://dev.w3.org/csswg/css-transforms/" rel="nofollow">css transform spec</a> includes this section below, which may shed light on the issue:</p>
  
  <blockquote>
    <p>The accumulated 3D transformation matrix is a 4×4 matrix, while the
    objects to be transformed are two-dimensional boxes. To transform each
    corner (a, b) of a box, the matrix must first be applied to (a, b, 0,
    1), which will result in a four-dimensional point (x, y, z, w). This
    is transformed back to a three-dimensional point (x′, y′, z′) as
    follows:</p>
    
    <p>If w > 0, (x′, y′, z′) = (x/w, y/w, z/w).</p>
    
    <p>If w = 0, (x′, y′, z′) = (x ⋅ n, y ⋅ n, z ⋅ n). n is an
    implementation-dependent value that should be chosen so that x′ or y′
    is much larger than the viewport size, if possible. For example, (5px,
    22px, 0px, 0) might become (5000px, 22000px, 0px), with n = 1000, but
    this value of n would be too small for (0.1px, 0.05px, 0px, 0). This
    specification does not define the value of n exactly. Conceptually,
    (x′, y′, z′) is infinitely far in the direction (x, y, z).</p>
    
    <p>If w &lt; 0 for all four corners of the transformed box, <strong>the box is not
    rendered.</strong></p>
  </blockquote>
  
  <p>update: bug does not reproduce in explorer either. see fiddle below:</p>
  
  <p><a href="http://jsfiddle.net/AxkEj/48/" rel="nofollow">http://jsfiddle.net/AxkEj/48/</a></p>