1528244 - Firefox and Thunderbird Font rendering of UI elements changes on hover with hintstyle set to "hintfull"

Status: UNCONFIRMED

(Core :: Graphics: Text, defect, P3)

Description

[wavexx]

Attachment: hovering.gif

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:60.0) Gecko/20100101 Firefox/60.0

Steps to reproduce:

Hovering on certain UI elements such as the URL bar or tabs changes the font rendering parameters. It looks as if grid alignment is calculated/disable incorrectly.

Because this is difficult to explain, I've recorded a small gif (attached).

This started with FF 65 on Linux (Debian unstable). FF 64 didn't have this behavior.

Comment 1

[wavexx]

I actually noticed that the rendering of most control widgets in webpages (such as <select> drop-downs) also show the same behavior.

The font rendering of the page itself though is fine.

Comment 2

[Jeff Muizelaar [:jrmuizel]]

Can you find a regression window using https://mozilla.github.io/mozregression/?

Comment 3

[wavexx]

I don't have fast connectivity here at home, I doubt I can run it at all.

Comment 4

[wavexx]

I had the ability to run mozregression at work and have some more info.
Looks like this is not a regression in FF65.

Debian unstable upgraded fonts-roboto recently:

fonts-roboto:amd64 2:020160106-2 -> 2:020170802-1

The new version of roboto is causing this behavior to occur.
To reproduce the issue, I have configured "Roboto Medium" as the default GTK3 font.

This results in:

gtk-font-name=Roboto Medium 12

in .config/gtk-3.9/settings.ini

First, to be able to reproduce the issue easily as shown above, you need at least two tabs open.
Just creating the tab will trigger the behavior.

I cannot see any other misbehavior with this version of Roboto Medium in any other GTK3 program, or even by using Roboto Medium in a web page itself (without using an external font), so there must be something else here.

All recent versions of FF have this issue. With mozregression I got down to this:

5:07.35 INFO: Narrowed nightly regression window from [2017-08-01, 2017-08-03] (2 days) to [2017-08-02, 2017-08-03] (1 days) (~0 steps left)
5:07.35 INFO: Got as far as we can go bisecting nightlies...
5:07.35 INFO: Last good revision: 52285ea5e54c73d3ed824544cef2ee3f195f05e6 (2017-08-02)
5:07.35 INFO: First bad revision: 63e261ce8cb04c913d2e6b19ea451b7078d24dc1 (2017-08-03)

The last good version still has an absolutely horrible rendering of this version of roboto medium (unreadable), but hovering on UI elements does not cause this behavior.

The first bad version results in slightly better rendering, but does trigger the issue.

I brief trial of several other fonts on my system do not seem to trigger this issue.
It seems quite specific to Roboto Medium.

Comment 5

[wavexx]

Still the same on FF 66.

Comment 6

[wavexx]

This somehow got worse with FF68.0b6.
The urlbar now sometimes gets "stuck" without hinting until the url is changed.
All tooltips are consistently broken with the same issue.

Comment 7

[wavexx]

Attachment: 2019-06-25T163402.png

Bad kerning on tooltips

Comment 8

[wavexx]

Attachment: 2019-06-26T193703.png

Same stuff in the sidebars...

Comment 9

[wavexx]

Interestingly, while trying to find if any config parameter related to font-rendering may affect the results, I noticed that enabling webrender (again, this is on debian linux under x11 / intel HD graphics) changes the way the text is rendered in about:config in a way that becomes very similar to other interface elements (extremely bad hinting and kerning). I don't know if this can be useful.

Comment 10

[wavexx]

Still the same on FF71 (same setup)

Comment 11

[wavexx]

Issue also reproduces with a new profile using FF71.0 (official mozilla build).

Text changes not only on hover, but also occasionally while being typed, and several times while it's being rendered:

• the text in the Tab will switch between being correctly/incorrectly hinted multiple times as the tab is being loaded
• text in the URL will change as soon as you press enter, then switch again as the page is loaded

The text "https" or "about:" is especially bad

Comment 12

[wavexx]

Attachment: 2019-12-05T132908.png

Comment 13

[wavexx]

Attachment: 2019-12-05T132951.png

The text is "about:config", but the horrible kerning hides the colon completely

Comment 14

[wavexx]

Thanks. It seems to be related, except I can reproduce the issue with the following:

• I'm on linux
• layers.acceleration.disabled is false
• gfx.content.azure.backends is skia

If I enable:

• layers.acceleration.force-enabled to true

then the rendering on the URL bar seems to be fixed (likely the intel driver seems to be blacklisted by default).

The rendering on the tabs though is always broken in all combinations: there is no difference in rendering when switching between cairo/skia backends with layers.acceleration.force-enabled to false.

Comment 15

[Andrei Benea]

I can reproduce this problem with Roboto and DejaVu Sans on Firefox 81.0 when hintstyle is "hintfull". Setting hintstyle to "hintnone", "hintslight" or "hintmedium" fixes the problem.

Comment 16

[Gabriele]

I suddenly started to have this issue. I suspect the problem has been there for quite a while, but it has been infrequent enough for me not to seek for a solution. Now things have changed.

I can confirm all of what has been said.

1. I can reproduce the issue only when I set the hintstyle to hintfull (which is my preferred configuration). I'm currently using Noto Sans.
2. layers.acceleration.force-enabled set to true helps greatly, but it's not a definitive solution. I think this is what was making the issue infrequent here.
3. Anything inside the window is affected, not just toolbars or other parts of the browser UI.

I found an interesting example for 3). Random parts of the twitter.com website show the weird effects when the background of some element changes on mouse hover. For example, at least one of the rows here https://twitter.com/i/trends shows that weird effect.

I'll add that Thunderbird is affected by the same issue.