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. -- You received this bug notification because you are a member of Ubuntu Bugs, which is subscribed to Ubuntu. https://bugs.launchpad.net/bugs/1883369 Title: Weird font rendering on certain website with firefox To manage notifications about this bug go to: https://bugs.launchpad.net/firefox/+bug/1883369/+subscriptions -- ubuntu-bugs mailing list [email protected] https://lists.ubuntu.com/mailman/listinfo/ubuntu-bugs
