chrome：为什么css使用变换scale的大元素进行3d变换< 0引起白屏错误？ [英] chrome: why does css 3d transform on large elements with transform scale < 0 cause white screen bug?

问题描述

我遇到了Chrome屏幕区域变白的问题。下面是一个简化的测试用例。
从测试中，似乎结论是变换scale和rotate的组合导致的问题。为了重现很少的html元素的问题，我夸大了情况，并使用一个5000px的缩小0.125的方形。

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.

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

Notice that only the first test reproduces the bug,a and it does not reproduce in 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);

使用缩放而不是缩放比例：

with zoom instead of scale:

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

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

向webkit回应错误报告

css转换规范包括以下这一部分，可以阐明问题：

css transform spec includes this section below, which may shed light on the issue:

累积的3D变换矩阵是4×4矩阵，而要变换的
对象是二维框。为了变换框的每个
角（a，b），矩阵必须首先应用于（a，b，0，
1），这将导致四维点y，z，w）。由于
如下，因此
被转换回三维点（x'，y'，z'）：

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:

如果w> 0

如果w = 0，则（x'，y'，z'）=（x / w，y / w，z / y'，z'）=（x·n，y·n，z·n）。 n是一个
实现相关的值，应该选择，使得x'或y'
远大于视口大小，如果可能的话。例如，（5px，
22px，0px，0）可能变成（5000px，22000px，0px），n = 1000，但是
这个值n对于（0.1px，0.05 px，0px，0）。这个
规范没有精确定义n的值。在概念上，
（x'，y'，z'）在方向（x，y，z）上是无穷远的

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.

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

推荐答案

问题是因为你已经使用百分比来指定div的高度rz。请注意，要在百分比中使用height，所有父元素的高度也需要以百分比形式指定。

The problem is because you have used percentages to specify height of the div with class "rz". Note that to use height in percentages all the parent element's height need to be specified in percentages too.

这里不是这样。您已指定封装div的高度（以像素为单位）。

This is not the case here. You have specified the wrapper div's height in pixels.

这篇关于chrome：为什么css使用变换scale的大元素进行3d变换&lt; 0引起白屏错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！