This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.
What happens if a singular 3D transform is applied? Test-case 1: data:text/html,<!DOCTYPE html> <div style="background:lime;height:100px;width:100px; -ms-transform:scalez(0); -moz-transform:scalez(0); -webkit-transform:scalez(0)"> IE10 Developer Preview and Firefox 14.0a1 render nothing. WebKit nightly r109732 (Windows) and Chrome 19 dev (Linux, with GPU acceleration) render a green square. data:text/html,<!DOCTYPE html> <div style="background:lime;height:100px;width:100px; -ms-transform:scale3d(2,2,0); -moz-transform:scale3d(2,2,0); -webkit-transform:scale3d(2,2,0)"> This is the same as before, except in this case Chrome 19 dev also renders nothing. If we think of elements as being boxes in the x-y plane with zero thickness, a singular transform that projects them to the x-y plane shouldn't stop them from rendering. If we think of them as having infinitesimal thickness, however, perhaps it should. More to the point, non-invertible matrices are a pain to deal with, so perhaps we should say they always cause nothing to render. Test-case 3: data:text/html,<!DOCTYPE html> <div style="background:lime;height:100px;width:100px; -ms-transform:scale3d(2,2,0); -moz-transform:scale3d(2,2,0); -webkit-transform:scale3d(2,2,0)" onclick="alert('test')"> In the WebKit nightly on Windows, this does render, but clicking on the green box does nothing. This is unexpected. In other browsers it doesn't render, so of course clicking does nothing. Should we require that an element affected by a singular transform doesn't render? This is obvious for 2D transforms, because the box is mapped to a line or point, but it's not obvious for rank-2 3D transforms, since they map the box into a plane. This change would mean that nothing should render in any of these test-cases.
(If the element doesn't display, we need to think about what getBoundingClientRect(), elementFromPoint(), etc. do.)
Created attachment 1101 [details] SVG element with singular matrix It might be a good idea to look what SVG does. I attached a short example: <g> <rect x="100" y="100" width="100" height="100" transform="scale(0)"/> </g> That is the actual code. When you open it in SVG viewers, the rect will not get displayed on all browsers. And it shouldn't, because of the singular transformation on the matrix. Now to the bounding box. If you check the bounding box of the SVGGElement if no transform was applied to the rect, it should be (100,100,100,100). But when you check the bounding box with the transform on the child, you get (0,0,0,0), as if no rect was in the DOM. document.getElementsByTagName('g')[0].getBBox() In my eyes the same should happen for getBoundingClientRect(), elementFromPoint(). And for animation section we already have the note, that the figure would disappear from the screen. WebKit should fix the implementation.
(In reply to comment #2) > It might be a good idea to look what SVG does. SVG only supports 2D transforms, and there it's obvious that everything should disappear. A singular 2D transform maps everything to a line or a point, so it has zero thickness. A singular 3D transform can map everything to a plane, so it's not obvious that it should disappear. scaleZ(0) projects everything to the x-y plane, but everything started out on the x-y plane, so it would make sense for it to be a no-op rather than making everything disappear. However, I think we should indeed spec that everything disappears. We can rationalize this by saying that elements don't really have zero thickness, but rather infinitesimal thickness, and if you squish them to zero thickness they vanish. > Now to the bounding box. If you check the bounding box of the SVGGElement if no > transform was applied to the rect, it should be (100,100,100,100). > > But when you check the bounding box with the transform on the child, you get > (0,0,0,0), as if no rect was in the DOM. This isn't how most browsers behave with singular 2D transforms. getBoundingClientRect() returns the smallest rectangle that would contain the transformed element, same as always. If it gets mapped to a point, it returns a rectangle at that point with no width and height. Test-case: data:text/html,<!doctype html> <body style="margin:0"> <div style="height:100px; width:100px; -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0)"></div> <script> var rect = document.querySelector("div").getBoundingClientRect(); document.body.textContent = rect.top + "," + rect.right + "," + rect.bottom + "," + rect.left; </script> In Firefox 14.0a1, Chrome 19 dev, WebKit nightly r109732 on Windows, and Opera Next 12.00 alpha, this outputs "50,50,50,50". In IE10 Developer Preview, it outputs apparent gibberish ("0.4399871826171875,100,100.44000244140625,0"), which seems like an IE bug. If there were no rendered box at all, it would be "0,0,0,0".
Any objections to saying that an element affected by a singular transform doesn't render? If not, I'll change the spec and update my tests.
(In reply to comment #4) > Any objections to saying that an element affected by a singular transform > doesn't render? If not, I'll change the spec and update my tests. Sounds good for me. Do you think we have to define how getClientsRect and co. handle elements with singular matrices? Or is it something that gets specified in CSSOM View together with the general handling of transforms on these functions? I don't think that we need to address this.
If CSSOM View defines how those interact with transforms, it should define how they interact with singular transforms too.
Resolution of FX TF: UAs do not render objects with singular matrices, even if non-scaling-stroke was defined.
(In reply to comment #7) > Resolution of FX TF: UAs do not render objects with singular matrices, even if > non-scaling-stroke was defined. I added the following text: If a transform function causes the CTM of an object to be non-invertible, the object and it's content does not get displayed. EXAMPLE: The object in the following example gets scaled by 0. <style> .box { transform: scale(0); } </style> <div class="box"> Not visible </div> The scaling causes a non-invertible CTM for the coordinate space of the div box. Therefore neither the div box, nor the text in it get displayed. Anything that should be changed? Can we close the bug?
I think we're done here.