<meta http-equiv="content-type" content="text/html; charset=utf-8"><span class="Apple-style-span" style="border-collapse: collapse; color: rgb(32, 32, 32); font-family: 'Droid Sans', arial, sans-serif; font-size: 13px; "><div>
What is the intended behaviour if someone applies the following style to an element:</div><div><br></div>-webkit-transform: scale3d(0.8, 0.8, 0)<div><br></div><div>?</div><div><br></div><div>Right now (in Chromium and Safari) there are two different behaviours depending whether the GPU is involved or not.</div>
<div><br></div><div>With gpu acceleration the objects renders properly, but stops responding to mouse events. This is due to the fact that elements with non-invertible transforms are excluded from hit testing.</div><div><br>
</div><div>Without gpu acceleration, the object renders properly and continues to respond to mouse events. This is due to the fact that when makeRenderable() is called on the element's transform, it is forced to be affine and it becomes invertible in the process.</div>
<div><br></div><div>So which, if either, is "correct"?</div><div><br></div><div>The following quote is found at</div><div><br></div><div><a href="http://www.w3.org/TR/css3-2d-transforms/" target="_blank" style="color: rgb(103, 117, 58); ">http://www.w3.org/TR/css3-2d-transforms/</a></div>
<div><br></div><div><font face="arial, helvetica, sans-serif">"<span style="line-height: 20px; ">In some cases, an animation might cause a transformation matrix to be singular or non-invertible. For example, an animation in which scale moves from 1 to -1. At the time when the matrix is in such a state, the transformed element is not rendered.</span>"</font></div>
<div><br></div><div>In this case, neither behaviour seems quite consistent, since in both case the element is rendered. Then again, this is -webkit-transform, not CSS transform, so are the intended outcomes different?</div>
<div><br></div><div>Cheers,</div><div><br></div><font color="#888888"><div>James</div></font></span>