var rect = document.querySelector("div").getBoundingClientRect(); document.body.appendChild(document.createTextNode(
rect.top + " " + rect.right + " " + rect.bottom + " " + rect.left));
In Firefox 12.0a1 (2012-01-17), this outputs "-35791396 0 0 -35791396" and there's no visible box. In Chrome 17 dev, adjusted for prefixing, it outputs "8 108 58 8" and the box appears just as though there were no transform applied. WebKit seems clearly correct -- scaleZ(0) by itself should do nothing visible, because no point on the x-y plane gets moved. 3D transforms that collapse everything to a plane shouldn't stop anything from rendering, as long as that plane isn't perpendicular to the x-y plane. Only transforms that collapse everything to a line or point should make things disappear.
I wasn't able to test in IE10, so I don't know what it does.
IE10 Developer Preview behaves like Gecko, but I don't see why that should be correct . . .
The 2012-02-07 nightly seems to have getBoundingClientRect() correct, although the box still doesn't display.
I'm no longer sure the requested behavior is actually desired: https://www.w3.org/Bugs/Public/show_bug.cgi?id=16377
The editors decided that Gecko is correct, all invertible matrices cause the content to vanish.
(I mean *non*-invertible, obviously)