1

Webkit 错误跟踪器：https ://bugs.webkit.org/show_bug.cgi?id=110056

相关问题：Chrome CSS3 3D Transform bug

在 chrome 中，当在具有大宽度/高度值的元素上使用 css 时，一旦达到大小和/或元素数量的阈值，屏幕的某些部分就不再被绘制。

请查看以下测试页面：http: //jsfiddle.net/AxkEj/35/

注意：橙色容器上有变换比例，导致它看起来比实际像素大小小得多。如果将宽度（按照页面上的说明）增加到 7000 像素左右（取决于屏幕尺寸等各种因素。

代码示例（遵守 SO 规则）：

   body {
   background: red;

} 身体，div { 填充：0；边距：0；} h1 { 字体大小：20px; 边距：10px；} .wrapper { 宽度：5000px; 高度：5000px；-webkit 变换：比例（0.125）；-webkit-transform-origin：0 0 0；-moz 变换：比例（0.125）；-moz 变换原点：0 0 0；背景：橙色；}

.wrapper div { 浮动：左；身高：46%；宽度：46%；保证金：2%；} .wrapper:hover > div { -webkit-transform: rotateX(45deg); -moz变换：旋转X（45度）；}

.rz { 背景：紫罗兰色；}

.wrapper:hover .rz { -webkit-transform: rotateZ(45deg); -moz变换：旋转Z（45度）；}

4

0 回答 0