Bug 58965 - CSS transform doesn’t apply to inline elements
: CSS transform doesn’t apply to inline elements
Status: UNCONFIRMED
: WebKit
CSS
: 528+ (Nightly build)
: Macintosh Intel Mac OS X 10.6
: P2 Normal
Assigned To:
: http://jsfiddle.net/boblet/HY47L/
:
:
:
  Show dependency treegraph
 
Reported: 2011-04-19 23:09 PST by
Modified: 2011-09-22 08:23 PST (History)


Attachments
Demonstration of isolating characters in inline-block so that transforms can be applied (364 bytes, text/html)
2011-06-01 20:55 PST, Shane Stephens
no flags Details
Demonstration of isolating characters in inline-block so that transforms can be applied (2) (529 bytes, text/html)
2011-06-01 21:12 PST, Shane Stephens
no flags Details


Note

You need to log in before you can comment on or make changes to this bug.


Description From 2011-04-19 23:09:15 PST
The spec says transform should apply to block-level and inline-level elements: http://www.w3.org/TR/css3-2d-transforms/#transform-property
applying a transform:rotate(18deg) to an element with display: inline doesn’t work

Webkit r84295, Chrome 10 and Safari 5.04 fail
Firefox 4 and Opera 11.10 work as expected
------- Comment #1 From 2011-04-19 23:42:30 PST -------
Same results on iPad 2, iOS 4.3.2, inline star doesn't rotate.
------- Comment #2 From 2011-04-20 12:34:44 PST -------
See http://www.w3.org/mid/m262qxbr9e.fsf@eoconnor.apple.com
------- Comment #3 From 2011-04-20 12:35:14 PST -------
duh, obviously that's the reason for filing this bug :)
------- Comment #4 From 2011-04-20 18:32:40 PST -------
Thanks for the iOS check Thomas, and the link Dean! Following up from Dean, the relevant text in the link is:
“I propose that CSS Transforms be limited to block-level elements, and inline elements that are never split into multiple boxes (i.e. replaced elements, inline-block and inline-table)”

The spec change mentioned in the link is:
“Applies to: block-level and atomic inline-level elements”
http://dev.w3.org/csswg/css3-2d-transforms/#transform-property

As I should have mentioned the workaround for transforming inline elements is to use display: inline-block;. However, single characters would qualify as atomic, so even in the editor’s draft I still think this is a bug ;)
------- Comment #5 From 2011-05-18 20:54:31 PST -------
From the CSS 2.1 spec (http://www.w3.org/TR/CSS2/visuren.html#inline-boxes):

"An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a 'display' value of 'inline' generates an inline box. Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box."

<span> is inline-level (display: inline), non-replaced (not an img or embedded document), and therefore an inline box (non-replaced + display: inline). Regardless of whether the content is a single character, <span> is therefore not atomic (it is an inline box). 

So this is not a bug in the editor's draft :)
------- Comment #6 From 2011-06-01 20:32:03 PST -------
If the spec says that inline elements should not be transformed, then the spec is wrong.

I need to be able to apply transforms to individual letters in the context of words which comply to line wrapping rules.

Setting inline-block on a single letter (or series of letters) screws that up entirely.

Please fix this ASAP (both the draft and Webkit).
------- Comment #7 From 2011-06-01 20:35:57 PST -------
(In reply to comment #6)
> If the spec says that inline elements should not be transformed, then the spec is wrong.

Please participate in the discussion on the www-style mailing list if you have feedback on the spec.
------- Comment #8 From 2011-06-01 20:55:11 PST -------
Created an attachment (id=95714) [details]
Demonstration of isolating characters in inline-block so that transforms can be applied
------- Comment #9 From 2011-06-01 21:02:27 PST -------
However, this doesn't work correctly with line wrapping.  There should be a way to make it work though.
------- Comment #10 From 2011-06-01 21:12:57 PST -------
Created an attachment (id=95715) [details]
Demonstration of isolating characters in inline-block so that transforms can be applied (2)

This version wraps the word itself in an inline-block span so that it doesn't break across lines.  I'm pretty sure this is exactly the use case that Brian claims is broken - Brian does this do what you want it to?