Bug 64013 - REGRESSION: CJK characters causes floats to be misaligned
Summary: REGRESSION: CJK characters causes floats to be misaligned
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Macintosh OS X 10.6
: P1 Major
Assignee: Nobody
URL: http://jsfiddle.net/uVytP/2/
Keywords: InRadar, Regression
Depends on:
Blocks:
 
Reported: 2011-07-06 11:55 PDT by Bryan Logan
Modified: 2011-09-20 06:07 PDT (History)
5 users (show)

See Also:


Attachments
test case (401 bytes, text/html)
2011-07-06 14:24 PDT, Alexey Proskuryakov
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Bryan Logan 2011-07-06 11:55:04 PDT
See the attached JSFiddle.  The bottom float should be flush to the right.  Changing the characters in the top right to English characters causes the float on the bottom row to be properly aligned.
Comment 1 Alexey Proskuryakov 2011-07-06 14:24:32 PDT
Created attachment 99881 [details]
test case

Thank you for the report!

It's better to have test cases actually attached than to link to external sites.
Comment 2 Alexey Proskuryakov 2011-07-06 14:26:03 PDT
Confirmed with r90400. This is a regression from Safari 5.0.5.
Comment 3 Alexey Proskuryakov 2011-07-06 14:26:24 PDT
<rdar://problem/9732600>
Comment 4 Bryan Logan 2011-08-08 13:22:17 PDT
Has there been any progress on this?  This is a pretty bad regression because not only is the content misaligned, but it also doesn't fire click events.
Comment 5 Alexey Proskuryakov 2011-08-08 13:58:49 PDT
Are there any known sites affected? That information would help prioritize investigation.
Comment 6 Bryan Logan 2011-08-09 04:53:33 PDT
This affects Gmail mobile in CJK.
Comment 7 mitz 2011-08-09 10:25:02 PDT
Looks like the CJK font has a larger descender, making the first float taller than a line, so its bottom is below the top of the second float (which originates on the second line).
Comment 8 Bryan Logan 2011-08-31 16:47:13 PDT
Is there a patch coming?  This also affects the newly-launched Gmail Offline such that stars cannot be clicked.
Comment 9 mitz 2011-09-19 14:10:06 PDT
With the test case (attachment 99881 [details]), TOT WebKit behavior matches the layout in Firefox 3.6.22 and in Firefox 6.0.2 in OS X Lion. I think this is actually a WebKit progression and I see no reason to change the behavior.
Comment 10 Bryan Logan 2011-09-20 04:50:24 PDT
I see this in FireFox as well, though I'm not convinced it is correct.  Is it in the spec?

At the least there should be a workaround.  How can I get the bottom line to float completely to the right?
Comment 11 Philippe Wittenbergh 2011-09-20 06:07:21 PDT
(In reply to comment #10)
> I see this in FireFox as well, though I'm not convinced it is correct.  Is it in the spec?

It is correct per the spec. Depending on how your browsers are configured (which default font ?), the issue will be more or less visible. The intrinsic line-height for the roman text (Times maybe, or Helvetica maybe ?) is narrower / smaller than the line-height for the Japanese text - Hiragino Kaku gothic has an intrinsic line-height of about 1.5em, Times about 1.15em, Helvetica 1.05em). The line-box generated for your first floated box is thus much taller than the ones for the Roman text.
 
> At the least there should be a workaround.  How can I get the bottom line to float completely to the right?

Set the line-height ? or better 'clear:right' for the second float (basic things really)?


---
It doesn't help that WebKit does some hackery things with Helvetica and Times to have their (intrinsic) line-height match the one for Arial and Times New Roman - but that is still smaller than Jpn fonts.