Question

我遇到的问题是屏幕区域变成白色的铬。下面是一个简化的测试用例。从测试中可以看出，变换比例和旋转的组合导致了这个问题。为了重现几个html元素的问题，我夸大了这种情况并使用了一个5000px的正方形缩小了0.125。

请注意，只有第一个测试会再现bug，而且它不会在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包含以下部分，可能会解释此问题：

累积的三维变换矩阵是一个4×4矩阵，而   要转换的对象是二维框。改造每一个   在一个方框的一个角（a，b），必须首先将矩阵应用于（a，b，0，   1），这将产生四维点（x，y，z，w）。这个   被转换回三维点（x'，y'，z'）   如下：

如果w＆gt; 0，（x'，y'，z'）=（x / w，y / w，z / w）。

如果w = 0，则（x'，y'，z'）=（x·n，y·n，z·n）。 n是一个   应依赖于实现的值，以便x'或y'   如果可能，远大于视口大小。例如，（5px，   22px，0px，0）可能会变成（5000px，22000px，0px），n = 1000，但是   这个n值对于（0.1px，0.05px，0px，0）来说太小了。这个   规范没有精确定义n的值。从概念上讲，   （x'，y'，z'）在方向（x，y，z）上无限远。

如果w＆lt; 0对于变换后的框的所有四个角，框不是   呈现。

更新：bug也无法在资源管理器中重现。看下面的小提琴：

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

Answer 1

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

这不是这种情况。您已指定包装div的高度（以像素为单位）。

chrome：为什么css 3d变换大变换规模＆lt; 0导致白屏错误？

1 个答案: