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

UNCONFIRMED
Unassigned

Status

()

P3
normal
UNCONFIRMED
2 years ago
a year ago

People

(Reporter: priston910423, Unassigned)

Tracking

({css3, fonts})

46 Branch
x86_64
Windows 10
css3, fonts
Points:
---

Firefox Tracking Flags

(firefox50 ?)

Details

Attachments

(5 attachments, 5 obsolete attachments)

(Reporter)

Description

2 years ago
Created attachment 8763517 [details]
test.rar

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
(Reporter)

Updated

2 years ago
Keywords: css3
OS: Unspecified → Windows 10
Hardware: Unspecified → x86_64
Version: 49 Branch → 47 Branch
(Reporter)

Updated

2 years ago
Version: 47 Branch → 46 Branch
(Reporter)

Updated

2 years ago
Component: Untriaged → CSS Parsing and Computation
Product: Firefox → Core

Comment 1

2 years ago
Created attachment 8763926 [details]
fontawesome-webfont.woff2
Were you able to reproduce this? Can you provide a simple testcase to observe the problem?
Flags: needinfo?(epinal99-bugzilla2)
(Reporter)

Comment 3

2 years ago
(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

Comment 4

2 years ago
Created attachment 8765662 [details]
1.html
Flags: needinfo?(epinal99-bugzilla2)

Comment 5

2 years ago
Created attachment 8765663 [details]
2.html

Comment 6

2 years ago
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
(Reporter)

Comment 8

2 years ago
(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
(Reporter)

Comment 9

2 years ago
I had test it in two computer and different version of firefox
(Reporter)

Comment 11

2 years ago
(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?
(Reporter)

Comment 13

2 years ago
Created attachment 8765709 [details]
Screenshot.zip

(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?
(Reporter)

Comment 15

2 years ago
There are same code ,but the distance to the border are not same.So when it in 2.html spin. It’s inclined.
(Reporter)

Comment 16

2 years ago
Or in different language,firefox treat font different?you know,I use fontawesome
(Reporter)

Comment 17

2 years ago
I found this only appear in lan="zh…",use"zh-Hant" is more obvious
(Reporter)

Comment 18

2 years ago
Created attachment 8765749 [details]
3.html

use lan="zh-Hant"
Component: CSS Parsing and Computation → Layout: Text

Comment 19

2 years ago
Created attachment 8765783 [details]
test.html

I can reproduce this Bug.

Comment 20

2 years ago
Created attachment 8765784 [details]
screenshot.gif

And the screenshot.

Comment 21

2 years ago
(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)

Updated

2 years ago
Attachment #8765662 - Attachment is obsolete: true

Updated

2 years ago
Attachment #8765663 - Attachment is obsolete: true

Updated

2 years ago
Attachment #8765709 - Attachment is obsolete: true

Updated

2 years ago
Attachment #8765749 - Attachment is obsolete: true

Updated

2 years ago
Attachment #8763517 - Attachment is obsolete: true

Updated

2 years ago
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?
Created attachment 8766079 [details]
screenshot of non-animating testcase

(actually, I see this on Windows)
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.)

Comment 28

2 years ago
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?
status-firefox50: --- → ?
(Reporter)

Updated

2 years ago
Keywords: fonts
Priority: -- → P3
You need to log in before you can comment on or make changes to this bug.