Open Bug 1280900 Opened 8 years ago Updated 2 years ago

vertical position of icon in downloaded font is too high for some languages, causing animation to wobble

Categories

(Core :: Layout: Text and Fonts, defect, P3)

46 Branch
x86_64
Windows 10
defect

Tracking

()

UNCONFIRMED
Tracking Status
firefox50 --- ?

People

(Reporter: priston910423, Unassigned)

Details

(Keywords: css3, fonts)

Attachments

(5 files, 5 obsolete files)

Attached file test.rar (obsolete) —
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:49.0) Gecko/20100101 Firefox/49.0
Build ID: 20160619004049

Steps to reproduce:

write a html


Actual results:

it work wrong


Expected results:

the 1.html is work crorrect,the 2.html is wrong
the difference is 1.html have lang="en"
but when i use lang="zh",it display same as 2.html

and both of it display correct in safemode,but it's no use to delete profile
Keywords: css3
OS: Unspecified → Windows 10
Hardware: Unspecified → x86_64
Version: 49 Branch → 47 Branch
Version: 47 Branch → 46 Branch
Component: Untriaged → CSS Parsing and Computation
Product: Firefox → Core
Were you able to reproduce this? Can you provide a simple testcase to observe the problem?
Flags: needinfo?(epinal99-bugzilla2)
(In reply to Timothy Nikkel (:tnikkel) from comment #2)
> Were you able to reproduce this? Can you provide a simple testcase to
> observe the problem?

I can reproduce,could you see attachment
Attached file 1.html (obsolete) —
Flags: needinfo?(epinal99-bugzilla2)
Attached file 2.html (obsolete) —
Chen, could you attach some screenshots of the good and bad rendering, please.
Flags: needinfo?(priston910423)
... and perhaps also describe what is incorrect about it?
Summary: animation work incrorrect → animation works incorrectly
(In reply to David Baron :dbaron: ⌚️UTC-7 (review requests must explain patch) from comment #7)
> ... and perhaps also describe what is incorrect about it?

the only different between the two html is 1.html has lang="zh"

in my browser,the 2.html's cog can't spin in the middle
I had test it in two computer and different version of firefox
(In reply to Loic from comment #10)
> Can you test with a fresh profile, please.
> https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-
> firefox-profiles

I had test,did this file work well in your computer
What does "can't spin in the middle" mean?  What do you see, and how does that differ from what you expect to see?
Attached file Screenshot.zip (obsolete) —
(In reply to David Baron :dbaron: ⌚️UTC-7 (review requests must explain patch) from comment #12)
> What does "can't spin in the middle" mean?  What do you see, and how does
> that differ from what you expect to see?

Please see the screenshot
I don't see anything wrong.  What should I look at?
There are same code ,but the distance to the border are not same.So when it in 2.html spin. It’s inclined.
Or in different language,firefox treat font different?you know,I use fontawesome
I found this only appear in lan="zh…",use"zh-Hant" is more obvious
Attached file 3.html (obsolete) —
use lan="zh-Hant"
Component: CSS Parsing and Computation → Layout: Text
Attached file test.html
I can reproduce this Bug.
Attached image screenshot.gif
And the screenshot.
(In reply to nayinain from comment #19)
> Created attachment 8765783 [details]
> test.html
> 
> I can reproduce this Bug.

Me too, thanks for te testcase and screenshot.
Flags: needinfo?(priston910423)
Attachment #8765662 - Attachment is obsolete: true
Attachment #8765663 - Attachment is obsolete: true
Attachment #8765709 - Attachment is obsolete: true
Attachment #8765749 - Attachment is obsolete: true
Attachment #8763517 - Attachment is obsolete: true
Summary: animation works incorrectly → Animation works incorrectly with some lang attributes
Probably the underlying issue here is what contributes to the line-height calculation for the inline-blocks in question; it may well be the default font and the downloaded font, or something like that.  Since the transform is around the center, the extents of a different font may cause the inline-block to be larger than 150px height, causing its center to be slightly incorrect.  Or something like that.
What does the non-animating testcase look like for those of you who see the bug?
Summary: Animation works incorrectly with some lang attributes → vertical position of icon in downloaded font is too high for some languages, causing animation to wobble
Note:  the relationship between the animating testcase and the non-animating one is that what the animation does is spin the aqua-colored box in the non-animating testcase around its center.  If the glyph is not centered in the aqua box, then the animation around the center of that box will wobble.
(And the reason I'm leaving this as UNCONFIRMED is that I haven't really looked for duplicates.)
Can reproduce on Nightly 50.0a1 x64 with e10s on Windows 10 x64 build 10586. Change the value of attribute "lang" of div to other values than "zh,zh-cn" can solve this problem. Maybe Firefox renders fonts in different languages differently?
Keywords: fonts
Priority: -- → P3
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: