Weird font rendering on certain website with firefox

[autra]

When hovering some elements, some letters moves slightly. A gif explains better than words here:

https://trancart.eu/lutim/l7qWMFQF/7Q9YJRUn.gif

I reproduce this at least on twitter and gitlab.com, but I remember having it on other websites.

My OS: kubuntu 20.04

Reproduced on both firefox dev edition and firefox from apt package.

Sorry in advance if it is not the correct place, I have no idea where to report that.

ProblemType: Bug
DistroRelease: Ubuntu 20.04
Package: firefox 77.0.1+build1-0ubuntu0.20.04.1
ProcVersionSignature: Ubuntu 5.4.0-33.37-generic 5.4.34
Uname: Linux 5.4.0-33-generic x86_64
NonfreeKernelModules: zfs zunicode zavl icp zcommon znvpair
AddonCompatCheckDisabled: False
ApportVersion: 2.20.11-0ubuntu27.2
Architecture: amd64
AudioDevicesInUse:
 USER PID ACCESS COMMAND
 /dev/snd/controlC0: augustin 4577 F.... pulseaudio
BuildID: 20200602222727
CasperMD5CheckResult: skip
Channel: Unavailable
CurrentDesktop: KDE
Date: Sat Jun 13 16:14:37 2020
DefaultProfileExtensions: extensions.sqlite corrupt or missing
DefaultProfileIncompatibleExtensions: Unavailable (corrupt or non-existant compatibility.ini or extensions.sqlite)
DefaultProfileLocales: extensions.sqlite corrupt or missing
DefaultProfilePrefErrors: Unexpected character ',' before close parenthesis @ /usr/lib/firefox/omni.ja:greprefs.js:731
DefaultProfilePrefSources: prefs.js
DefaultProfileThemes: extensions.sqlite corrupt or missing
EcryptfsInUse: Yes
ExecutablePath: /usr/lib/firefox/firefox
ForcedLayersAccel: False
IfupdownConfig:
 # interfaces(5) file used by ifup(8) and ifdown(8)
 auto lo
 iface lo inet loopback
InstallationDate: Installed on 2016-11-10 (1310 days ago)
InstallationMedia: Ubuntu 16.04.1 LTS "Xenial Xerus" - Release amd64 (20160719)
IpRoute:
 default via 192.168.0.254 dev enp0s31f6 proto dhcp metric 100
 10.0.3.0/24 dev lxcbr0 proto kernel scope link src 10.0.3.1 linkdown
 169.254.0.0/16 dev docker0 scope link metric 1000 linkdown
 172.17.0.0/16 dev docker0 proto kernel scope link src 172.17.0.1 linkdown
 192.168.0.0/24 dev enp0s31f6 proto kernel scope link src 192.168.0.4 metric 100
MostRecentCrashID: bp-9faa8c77-de9e-4f98-9e75-033440200610
Profile1Extensions: extensions.sqlite corrupt or missing
Profile1IncompatibleExtensions: Unavailable (corrupt or non-existant compatibility.ini or extensions.sqlite)
Profile1Locales: extensions.sqlite corrupt or missing
Profile1PrefErrors: Unexpected character ',' before close parenthesis @ /usr/lib/firefox/omni.ja:greprefs.js:731
Profile1PrefSources: prefs.js
Profile1Themes: extensions.sqlite corrupt or missing
Profile2Extensions: extensions.sqlite corrupt or missing
Profile2IncompatibleExtensions: Unavailable (corrupt or non-existant compatibility.ini or extensions.sqlite)
Profile2Locales: extensions.sqlite corrupt or missing
Profile2PrefErrors: Unexpected character ',' before close parenthesis @ /usr/lib/firefox/omni.ja:greprefs.js:731
Profile2PrefSources: prefs.js
Profile2Themes: extensions.sqlite corrupt or missing
Profile3Extensions: extensions.sqlite corrupt or missing
Profile3IncompatibleExtensions: Unavailable (corrupt or non-existant compatibility.ini or extensions.sqlite)
Profile3Locales: extensions.sqlite corrupt or missing
Profile3PrefErrors: Unexpected character ',' before close parenthesis @ /usr/lib/firefox/omni.ja:greprefs.js:731
Profile3PrefSources: prefs.js
Profile3Themes: extensions.sqlite corrupt or missing
Profile4Extensions: extensions.sqlite corrupt or missing
Profile4IncompatibleExtensions: Unavailable (corrupt or non-existant compatibility.ini or extensions.sqlite)
Profile4Locales: extensions.sqlite corrupt or missing
Profile4PrefErrors: Unexpected character ',' before close parenthesis @ /usr/lib/firefox/omni.ja:greprefs.js:731
Profile4PrefSources: prefs.js
Profile4Themes: extensions.sqlite corrupt or missing
Profiles:
 Profile3 - LastVersion=68.0/20190627143605 (Out of date)
 Profile1 - LastVersion=78.0/20200609215727 (Out of date)
 Profile0 (Default) - LastVersion=77.0.1/20200602222727 (In use)
 Profile2 - LastVersion=60.5.2/20190221164337 (Out of date)
 Profile4 - LastVersion=72.0.1/20200107212822 (Out of date)
RunningIncompatibleAddons: False
SourcePackage: firefox
UpgradeStatus: Upgraded to focal on 2020-05-09 (34 days ago)
dmi.bios.date: 05/17/2017
dmi.bios.vendor: LENOVO
dmi.bios.version: N1FET51W (1.25 )
dmi.board.asset.tag: Not Available
dmi.board.name: 20FBCTO1WW
dmi.board.vendor: LENOVO
dmi.board.version: SDK0J40709 WIN
dmi.chassis.asset.tag: No Asset Information
dmi.chassis.type: 10
dmi.chassis.vendor: LENOVO
dmi.chassis.version: None
dmi.modalias: dmi:bvnLENOVO:bvrN1FET51W(1.25):bd05/17/2017:svnLENOVO:pn20FBCTO1WW:pvrThinkPadX1Carbon4th:rvnLENOVO:rn20FBCTO1WW:rvrSDK0J40709WIN:cvnLENOVO:ct10:cvrNone:
dmi.product.family: ThinkPad X1 Carbon 4th
dmi.product.name: 20FBCTO1WW
dmi.product.sku: LENOVO_MT_20FB_BU_Think_FM_ThinkPad X1 Carbon 4th
dmi.product.version: ThinkPad X1 Carbon 4th
dmi.sys.vendor: LENOVO

[autra (autra)]

Also, I don't reproduce it on other machine (dell xps 13 kubuntu 20.04), which maybe points to drivers / graphic card issue?

[Balint Harmath (bharmath)]

Please report it onto the link below as well - with details about your hardware (Machine type, CPU, Graphical card type and attributes), and software (OS type and version, Firefox version).
 https://bugzilla.mozilla.org/enter_bug.cgi#h=dupes%7CFirefox and sharing the link to it here? Thanks!

[Balint Harmath (bharmath)]

Mozilla colleagues will have to work in this.

[autra (autra)]

Created attachment 9156568
Peek 12-06-2020 09-27.gif

# Description

When hovering certain element on some websites (example: buttons on gitlab.com, tweets on twitter...), there is a weird horizontal displacement of certain letters.

I'm attaching a gif, because it's easier to show it than explain it.

# Additional information

I reproduce it on a Lenovo X1 Carbon (cpu: Intel(R) Core(TM) i7-6600U, graphic card ` Intel Corporation Skylake GT2 [HD Graphics 520]`) on a Kubuntu 20.04 both on firefox from apt package (v77) and on Firefox dev edition (v78b6).

I **don't** reproduce it on a Dell XPS 13 (cpu: Intel Core i7-3537U, graphic card Intel Corporation 3rd Gen (I think it's an HD4000), on a Kubuntu 20.04.

I have no idea which component to select, so selecting "General" :-/

I have opened a bug on launchpad too: https://bugs.launchpad.net/ubuntu/+source/firefox/+bug/1883369

Please let me know if more informations are needed.

[Release-mgmt-account-bot (release-mgmt-account-bot)]

[Bugbug](https://github.com/mozilla/bugbug/) thinks this bug should belong to this component, but please revert this change in case of error.

[Paul White (paulw2u)]

Reverting status change.
Passing a bug upstream is not a reason to mark invalid.
Could be an Ubuntu related driver issue.

[autra (autra)]

I've opened https://bugzilla.mozilla.org/show_bug.cgi?id=1645681 upstream. Let's see what they say about it.

[Jnicol-x (jnicol-x)]

Thank you for the report! Do you know whether or not you have webrender enabled? Would you please be able to attach a copy of your about:support information?

Do you know whether this has always been the case, or whether it's a recent regression? If it's a regression, if you'd be able to run [mozregression ](https://mozilla.github.io/mozregression/quickstart.html) to help us track down what caused it, that would be great!

[autra (autra)]

Created attachment 9156693
raw about:support

[autra (autra)]

Thanks for your answer.

> Do you know whether this has always been the case, or whether it's a recent regression?

I think it happens when I upgraded my ubuntu from 19.10 to 20.04

I have gfx.webrender.enabled to false.

> if you'd be able to run mozregression to help us track down what caused it, that would be great!

well I'd like to, but every time mozregression starts a firefox, all the tabs always crash... I cannot load a single website :-(

[autra (autra)]

In the meantime, I opened https://bugzilla.mozilla.org/show_bug.cgi?id=1645969 for my mozregression problem.

[Jnicol-x (jnicol-x)]

Thanks for filing the mozregression issue. I'm afraid I can't help with it but hopefully somebody can on that bug.

In the meantime, could you try setting `layers.acceleration.force-enabled=true` in about:config, restart firefox, and see if it reproduces. Then after that, try setting `gfx.webrender.all=true`, restart, and see if it reproduces.

[F-dennis-m (f-dennis-m)]

I have the same problem. For me `layers.acceleration.force-enabled=true` solves this font problem, but generates another. Now in all menus, the mouseover/hover highlighting/selection of the menus is sometimes not shown (For example: Right click on the website, move your mouse over the menu items. The highlighting does not always follow the mouse and gets stuck in previous items)
Additionally using `gfx.webrender.all=true` doesn't solve that problem. But I prefer this problem over the strange fonts in websites.

[autra (autra)]

> layers.acceleration.force-enabled=true

this fixes the issue.

> gfx.webrender.all=true

this also fixes the issue.

So : I reproduce the issue if and only if **both** are false.

Additionally I **don't** reproduce on nightly, with both variables set to false.

[Jnicol-x (jnicol-x)]

(In reply to Augustin Trancart [:autra] from comment #8)
> Additionally I don't reproduce on nightly, with both variables set to false.

This might be because on nightly webrender is enabled by default even if this pref is false. You could check this in about:support.

It seems like it's probably a text painting issue which only occurs on basic layers then. Lee, any idea what could be going on?

[Lsalzman (lsalzman)]

Jonathan, seems vaguely like a layout issue? I think we have seen issues in the path where depending on how the CSS of the site was doing things for onhover (potentially animation/will-change related), it could route through different AA/hinting settings somehow?

[Jfkthame (jfkthame)]

Yeah, it looks like during the transition between hover/non-hover states, the glyphs are switching from subpixel-AA to grayscale, then back again; and while they're in the non-subpixel state, their spacing is terrible -- like maybe they've been individually rounded to pixels, without actually re-doing the layout to account for pixel rounding (which would re-calculate spacing everywhere, potentially changing line breaks, etc., so that would come with its own issues).

I don't know what the twitter code (for example) is doing that triggers this, but it seems likely something to do with running an animation/transition that causes the layerization to change while it's active. IIRC there are various conditions that force subpixel-AA to be disabled, and presumably one (or more) is involved here.

The main problem, though, is the incorrect pixel-snapping of the glyph positions when we're in the grayscale-render state. If we were just painting the glyphs in grayscale, without any change to their positions, the effect would be much less troubling; the quality of the AA would temporarily degrade during the transition, so the text would look a bit less clear, but it wouldn't jiggle about in such a horrible way.

Not currently sure exactly what level this is happening at, though... or how easy it'll be to reproduce and catch it for closer examination. Given that the reporter says "I think it happens when I upgraded my ubuntu from 19.10 to 20.04", local font rendering settings (freetype prefs etc) may be part of the formula, as well as whatever the sites are doing in their css/js.

[F-dennis-m (f-dennis-m)]

I found the ugly rendering is also persistent (not just on hover) on some websites, and doesn't completely go away when setting the two about:config options. For me it is always there in the google mail interface (however, not the displayed mail content).

Here, it started after an ubuntu 18.04 to 20.04 upgrade.

It goes away if I uncheck "Allow pages to choose their own fonts, instead of your selections above" in the Firefox font settings, but then the integrated PDF viewer is not able to show most documents: Fonts are just entirely gone and you see documents with mostly blank pages (not sure if that is expected or a related / different bug).

[autra (autra)]

> I found the ugly rendering is also persistent (not just on hover) on some websites

Yes, one of those websites is the demo version of codimd (https://demo.codimd.org, in the preview pane). It is not *always* bad though, but it eventually gets there, and then it stays ugly.

> local font rendering settings (freetype prefs etc) may be part of the formula, as well as whatever the sites are doing in their css/js.

I can test some other local settings if you want.

[Lsalzman (lsalzman)]

(In reply to Augustin Trancart [:autra] from comment #13)
> > I found the ugly rendering is also persistent (not just on hover) on some websites
>
> Yes, one of those websites is the demo version of codimd (https://demo.codimd.org, in the preview pane). It is not *always* bad though, but it eventually gets there, and then it stays ugly.
>
> > local font rendering settings (freetype prefs etc) may be part of the formula, as well as whatever the sites are doing in their css/js.
>
> I can test some other local settings if you want.

Do you use hintfull in your fontconfig hintstyle settings? It might be that when it is rendering with subpixel AA it uses the LCD-hinting algorithm, whereas when it goes to grayscale it has to use the normal hinting algorithm. If so, if you try using some other hintstyle like hintslight explicitly in your fontconfig settings, does it fix it?

[autra (autra)]

> Do you use hintfull in your fontconfig hintstyle settings?

No. I have a powerline config in my fontconfig conf directory though, which contains

```xml
 <match target="font">
  <edit name="hinting" mode="assign">
   <bool>false</bool>
  </edit>
 </match>
 <match target="font">
  <edit name="hintstyle" mode="assign">
   <const>hintnone</const>
  </edit>
 </match>
 <match target="font">
  <edit name="rgba" mode="assign">
   <const>bgr</const>
  </edit>
 </match>
 <match target="font">
  <edit name="antialias" mode="assign">
   <bool>true</bool>
  </edit>
 </match>
```
I'm attaching the full file just in case, and I'm going to test stuff with it.

[autra (autra)]

Created attachment 9208038
10-powerline-symbols.conf in ~/.config/fontconfig/conf.d

[autra (autra)]

(In reply to Lee Salzman [:lsalzman] from comment #14)
> (In reply to Augustin Trancart [:autra] from comment #13)
> > > I found the ugly rendering is also persistent (not just on hover) on some websites
> >
> > Yes, one of those websites is the demo version of codimd (https://demo.codimd.org, in the preview pane). It is not *always* bad though, but it eventually gets there, and then it stays ugly.
> >
> > > local font rendering settings (freetype prefs etc) may be part of the formula, as well as whatever the sites are doing in their css/js.
> >
> > I can test some other local settings if you want.
>
> Do you use hintfull in your fontconfig hintstyle settings? It might be that when it is rendering with subpixel AA it uses the LCD-hinting algorithm, whereas when it goes to grayscale it has to use the normal hinting algorithm. If so, if you try using some other hintstyle like hintslight explicitly in your fontconfig settings, does it fix it?

Ok so thanks to your message, I have be able to dig into this a bit. By default I use hintslight (10-hinting-slight.conf is linked into my /etc/fonts/conf.d), but the font that bugs is Roboto, that has its own config file in /etc/fonts/conf.d, and it uses hintfull. So I've edited this file directly, and every other value stops the jittering for me (it does not stop some weird spacing though, for instance sometimes the "i" is to close one of its sibling).

So I'm wondering: what is the correct fix here? Is this a config bug and I should raise the issue to the fontconfig package mainteneur? A font issue? Or a firefox one?

[Lsalzman (lsalzman)]

Really we'd want to avoid this transition from subpixel AA to grayscale on our side in the first place. But looking back, if you were using hintnone, this might have been fixed recently by bug 1732577. Worth a try in nightly to see if this is still a problem.