RESOLVED FIXED 103246
Vertical margin percentage values are resolved against logical height, not logical width 
https://bugs.webkit.org/show_bug.cgi?id=103246
Summary Vertical margin percentage values are resolved against logical height, not lo...
Rovanion Luckey
Reported 2012-11-26 05:32:02 PST
Looking at the fallowing example: http://jsfiddle.net/4HvZN/1/ If opened in any other browser but a webkit-based one the .upArrow appears in the middle of the page. As seen in this image with Chrome on the right and Firefox on the left: http://i.imgur.com/26vN6.png This seems to be because webkit-based browsers interpret the percentage as a percentage of the outer elements height. Meanwhile all other browsers interpret the percentage as a percentage of the page width. This behaviour is seen in many implementations of WebKit such as Safari 5.1.7 for Windows, Chrome 23, the Android 2.3 browser, the Safari on the iPhone 4S and so on.
Attachments
Add attachment proposed patch, testcase, etc.
Bear Travis
Comment 1 2012-11-26 13:37:00 PST
I have created a simpler test case here: http://jsfiddle.net/nE6NJ/ The problem appears to be that height is used instead of width when resolving a percentage-based margin-top on an absolutely positioned element. This conflicts with the specification: http://www.w3.org/TR/CSS2/box.html#margin-properties
Bear Travis
Comment 2 2012-11-27 17:45:22 PST
As an addendum, writing-modes specifies this should be calculated based on logical, rather than physical width. http://dev.w3.org/csswg/css3-writing-modes/#dimension-mapping. Going to try to patch this, so renaming bug. Will need to confirm original test case is fixed with patch.
Philippe Wittenbergh
Comment 3 2012-11-28 17:12:25 PST
Fwiw, I had filed bug 54613 for this some (long) time ago.
Bear Travis
Comment 4 2012-12-14 10:41:33 PST
Closing, as bug 103576 and bug 103579 have been fixed. Both should be present as of http://trac.webkit.org/changeset/137695
Note You need to log in before you can comment on or make changes to this bug.