Bug 24919 - CSS transformations do not work with inline elements
Summary: CSS transformations do not work with inline elements
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: PC All
: P5 Trivial
Assignee: Nobody
: 26257 (view as bug list)
Depends on:
Reported: 2009-03-29 03:28 PDT by CHL
Modified: 2009-06-08 13:01 PDT (History)
3 users (show)

See Also:

Testcase (197 bytes, text/html)
2009-04-02 04:39 PDT, CHL
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description CHL 2009-03-29 03:28:34 PDT
CSS transforms do not seem to work with :hover. Checked with Chrome and (nightly) WebKit GTK. Presumably also affects WebKit on OS X.
Comment 1 CHL 2009-03-30 05:50:56 PDT
After a bit of checking it seems that this only affects inline elements. On Mozilla -moz-transform affects both block and inline, while here -webkit-transform only affects inline. This happens regardless of whether :hover is used.
Comment 2 Anthony Ricaud 2009-04-01 16:58:23 PDT
Could you provide a testcase to confirm that ?
Comment 3 CHL 2009-04-02 04:39:11 PDT
Created attachment 29188 [details]

Testcase attached. The word "ordinary" should be rotated by 180 degrees, but isn't.
Comment 4 Anthony Ricaud 2009-04-03 09:59:50 PDT
Copying Simon to determine if it's a bug or not.

As a workaround now, you can use "display: inline-block;"
Comment 5 Simon Fraser (smfr) 2009-04-03 10:04:47 PDT
This is by design. Transforms only work on block-level elements. They really don't make too much sense on inlines, especially if the inline in broken over several lines -- where would the transform origin be?
Comment 6 CHL 2009-04-03 18:59:51 PDT
Maybe it can be done the way Gecko does it, transforming each line individually?
Comment 7 Mark Rowe (bdash) 2009-06-08 13:01:52 PDT
*** Bug 26257 has been marked as a duplicate of this bug. ***