Webkit bug tracker: https://bugs.webkit.org/show_bug.cgi?id=110056
related question: Chrome CSS3 3D Transform bug
In chrome, when using css on elements with large width / height values, once a threshold of size and/or number of elements is reached, parts of the screen are no longer painted.
Please see the following test page: http://jsfiddle.net/AxkEj/35/
Note: there is transform scale on the orange container causing it to appears much smaller than the actual pixel size. If you increase the width (as instructed on the page) to around 7000 px (depends on various factors such as screen size.
code example (to comply with SO rules):
body {
background: red;
} body, div { padding: 0; margin: 0; } h1 { font-size:20px; margin:10px; } .wrapper { width: 5000px; height: 5000px; -webkit-transform: scale(0.125); -webkit-transform-origin: 0 0 0; -moz-transform: scale(0.125); -moz-transform-origin: 0 0 0; background: orange; }
.wrapper div { float:left; height:46%; width:46%; margin:2%; } .wrapper:hover > div { -webkit-transform: rotateX(45deg); -moz-transform: rotateX(45deg); }
.rz { background: violet; }
.wrapper:hover .rz { -webkit-transform: rotateZ(45deg); -moz-transform: rotateZ(45deg); }
