css - Chrome : why does css 3d transform on large elements with transform scale < 0 cause white screen bug?

Question

我遇到了一个问题，屏幕区域在 chrome 中变白了。下面是一个简化的测试用例。从测试中可以得出结论，变换缩放和旋转的组合是导致问题的原因。为了用很少的 html 元素重现该问题，我夸大了情况并使用了 5000px 的正方形缩小了 0.125。

请注意，只有第一个测试重现了该错误，a 而它不会在 firefox 中重现。

按比例缩小: http://jsfiddle.net/AxkEj/46/embedded/result/

   width: 5000px;
   height: 5000px;
   -webkit-transform: scale(0.125);

没有规模: http://jsfiddle.net/47SmB/1/embedded/result/

   width: 625px;
   height: 625px;

随着规模的扩大: http://jsfiddle.net/YpfPt/2/

   width: 50px;
   height: 50px;
   -webkit-transform: scale(10);

使用缩放而不是缩放:

    width: 5000px; 
    height: 5000px;
    zoom: 0.125;

http://jsfiddle.net/AxkEj/47/

bug report to webkit with response

css transform spec包括下面的这一部分，这可能会阐明这个问题:

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:

If w > 0, (x′, y′, z′) = (x/w, y/w, z/w).

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).

If w < 0 for all four corners of the transformed box, the box is not rendered.

更新:错误也不会在资源管理器中重现。请参阅下面的 fiddle :

http://jsfiddle.net/AxkEj/48/

Answer 1

问题是因为您使用百分比来指定类为“rz”的 div 的高度。请注意，要以百分比形式使用高度，所有父元素的高度也需要以百分比形式指定。

这里不是这种情况。您已指定包装器 div 的高度(以像素为单位)。