This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.
""" transformable element A transformable element can either be a block-level or atomic inline-level element, not splitted into multiple inline-level boxes, from the HTML namespace, or an element which has the attributes ‘transform’, ‘patternTransform’ or ‘gradientTransform’ in the SVG namespace (see [SVG11]). """ http://dev.w3.org/csswg/css3-transforms/#TermTransformableElement Test-case: data:text/html,<!doctype html> <div style=width:100px> <span style=transform:translatex(50px)> The quick brown fox jumped over the lazy dog </span> </div> In IE9, Firefox 12.0a1, and Opera Next 12.00 alpha, the transform works fine. In Chrome 17 dev, the transform doesn't work. I suggest the restriction be lifted, so any element can be transformed.
This was discussed at some length at a F2F meeting. The issue with transforming line boxes is how to treat split boxes. There is no good answer that matches author expectation.
Can you give an example where it's not clear what browsers should do? Why isn't it enough to say that everything is laid out as it normally would be, then transforms are applied to whatever parts of line boxes are transformed? This is how relative positioning works for inline elements, no?
Consider <span style="transform: rotate(10deg)">Here is<br>some text</span>. Do you rotate the two line boxes as one, or rotate them individually? What's the transform-origin?
Ah, I see. Good catch. Browsers are indeed not interoperable here. For instance, if you try this: Suddenly everything <span style="transform:rotate(180deg);transform-origin:50% 58%"> turned<br>upside-down</span>! IE and Opera mangle it badly, and only Gecko gets the intended effect. On the other hand, if you do Suddenly everything <span style="display:inline-block;transform:rotate(180deg); transform-origin:50% 58%">turned</span> <br> <span style="display:inline-block;transform:rotate(180deg); transform-origin:50% 58%">upside-down</span>! then it works roughly as intended in all browsers. So I have no problem with saying transforms have no effect on non-replaced inline elements. If we have good use-cases and someone comes up with a definition that works, we could define behavior at that point.
Sounds good.