58965 2011-04-19 23:09:15 -0700 CSS transform doesn’t apply to inline elements 2022-09-30 08:50:23 -0700 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) Mac (Intel) OS X 10.6 RESOLVED CONFIGURATION CHANGED http://jsfiddle.net/boblet/HY47L/ P2 Normal --- 0 webkit.org webkit-unassigned ahmad.saleem792 anewpage.media dino eoconnor igor.oliveira phiw2 shanestephens simon.fraser thomas oldest_to_newest 389078 0 webkit.org 2011-04-19 23:09:15 -0700 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 389086 1 thomas 2011-04-19 23:42:30 -0700 Same results on iPad 2, iOS 4.3.2, inline star doesn't rotate. 389436 2 dino 2011-04-20 12:34:44 -0700 See http://www.w3.org/mid/m262qxbr9e.fsf@eoconnor.apple.com 389437 3 dino 2011-04-20 12:35:14 -0700 duh, obviously that's the reason for filing this bug :) 389730 4 webkit.org 2011-04-20 18:32:40 -0700 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 ;) 406233 5 shanestephens 2011-05-18 20:54:31 -0700 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 :) 413871 6 anewpage.media 2011-06-01 20:32:03 -0700 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). 413873 7 simon.fraser 2011-06-01 20:35:57 -0700 (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. 413879 8 95714 shanestephens 2011-06-01 20:55:11 -0700 Created attachment 95714 Demonstration of isolating characters in inline-block so that transforms can be applied 413880 9 shanestephens 2011-06-01 21:02:27 -0700 However, this doesn't work correctly with line wrapping. There should be a way to make it work though. 413881 10 95715 shanestephens 2011-06-01 21:12:57 -0700 Created attachment 95715 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? 1902369 11 ahmad.saleem792 2022-09-30 08:50:23 -0700 I am not able to reproduce this bug in all test cases: No-wrap example - work same in all browsers (Safari 16, Chrome Canary 108 and Firefox Nightly 107) and show "lifted" as twisted word. Wrap example - work same in all browsers (Safari 16, Chrome Canary 108 and Firefox Nightly 107) and show "lifted" as twisted word. JSFiddle - Same across all browsers as well and only one start (light pink) is tilted. I am marking this as "RESOLVED CONFIGURATION CHANGED" since all browsers now render this same. Please reopen, if this is reproducible or my testing is flawed or I missed something. Thanks! 95714 2011-06-01 20:55:11 -0700 2011-06-01 20:55:11 -0700 Demonstration of isolating characters in inline-block so that transforms can be applied inline_block_test.html text/html 364 shanestephens PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICA8c3R5bGU+Ci5saWZ0ZWQgewogIC13ZWJr aXQtdHJhbnNmb3JtOiB0cmFuc2xhdGUoMHB4LCAtMnB4KSByb3RhdGUoMTBkZWcpOwogIGRpc3Bs YXk6IGlubGluZS1ibG9jazsKfQoKLmRyb3BwZWQgewogIC13ZWJraXQtdHJhbnNmb3JtOiB0cmFu c2xhdGUoMHB4LCAycHgpIHJvdGF0ZSgtMTBkZWcpOwogIGRpc3BsYXk6IGlubGluZS1ibG9jazsK fQoKICA8L3N0eWxlPgo8L2hlYWQ+Cjxib2R5PgogIDxwPkhlcmUgaXMgc29tZSA8c3BhbiBjbGFz cz0ibGlmdGVkIj5sPC9zcGFuPmlmPHNwYW4gY2xhc3M9ImRyb3BwZWQiPnQ8L3NwYW4+ZWQgdGV4 dDwvcD4KPC9ib2R5Pgo8L2h0bWw+Cg== 95715 2011-06-01 21:12:57 -0700 2011-06-01 21:12:57 -0700 Demonstration of isolating characters in inline-block so that transforms can be applied (2) inline_block_test.html text/html 529 shanestephens PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICA8c3R5bGU+Ci5saWZ0ZWQgewogIC13ZWJr aXQtdHJhbnNmb3JtOiB0cmFuc2xhdGUoMHB4LCAtMnB4KSByb3RhdGUoMTBkZWcpOwogIGRpc3Bs YXk6IGlubGluZS1ibG9jazsKfQoKLmRyb3BwZWQgewogIC13ZWJraXQtdHJhbnNmb3JtOiB0cmFu c2xhdGUoMHB4LCAycHgpIHJvdGF0ZSgtMTBkZWcpOwogIGRpc3BsYXk6IGlubGluZS1ibG9jazsK fQoKLndvcmQgewogIGRpc3BsYXk6IGlubGluZS1ibG9jazsKfQoKcCB7CiAgd2lkdGg6IDEwMHB4 Owp9CgogIDwvc3R5bGU+CjwvaGVhZD4KPGJvZHk+CiAgPHA+SGVyZSBpcyBzb21lIGxvbmcgdGV4 dCB3aGljaCBjb250YWlucyBzb21lIAogICAgPHNwYW4gY2xhc3M9IndvcmQiPgogICAgICA8c3Bh biBjbGFzcz0ibGlmdGVkIj5sPC9zcGFuPmlmPHNwYW4gY2xhc3M9ImRyb3BwZWQiPnQ8L3NwYW4+ ZWQ8L3NwYW4+CiAgICA8L3NwYW4+CiAgdGV4dCBhcyBwYXJ0IG9mIHRoZSB3cmFwcGluZzwvcD4K PC9ib2R5Pgo8L2h0bWw+Cg==