I was playing around with Wink Toolkit’s Tag Cloud control and came across an interesting issue with Chrome and the CSS3 matrix3d transform function. In order for the z coordinate to work properly in the matrix3d parameters, you’ll need to set the parent element’s -webkit-transform-style property to preserve-3d.
The following example demonstrates the issue (make sure you use Chrome; the version that I’m experiencing this on is version 21.0.1180.82). On the left side there are two div elements that are the same size. the red div should be overlapping the blue div (since it’s “closer”) but this is not occurring. On the right side, I’ve set the preserve-3d value and this seems to fix the issue. It’s simply a matter of interpretting the W3 spec since Safari does not exhibit this issue (note that there’s no problem for Safari to interpret the preserve-3d value).
|
|
|
Here’s the code for the left side:
<div style="height: 125px; width: 125px;"> <div style="position: absolute; width: 100px; height: 100px; background-color: red; -webkit-transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 160, 1)"></div> <div style="position: absolute; width: 100px; height: 100px; background-color: blue; -webkit-transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 25, 25, 0, 1)"></div> </div>
Here’s the code for the right side:
<div style="height: 125px; width: 125px; -webkit-transform-style: preserve-3d"> <div style="position: absolute; width: 100px; height: 100px; background-color: red; -webkit-transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 160, 1)"></div> <div style="position: absolute; width: 100px; height: 100px; background-color: blue; -webkit-transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 25, 25, 0, 1)"></div> </div>