1825981 - Blurry text on some pages before text selection

Status: NEW

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

Description

[Nazar Mokrynskyi]

I recently noticed that some pages render with blurry text until it is forced to re-render. The latest one is https://zed.dev/blog/videogame

Reproduction steps:

1. Open the page
2. Observe the text is blurry (https://ibb.co/bFgxFLb)
3. Select some text (first paragraph for instance) and remove selection
4. Observe text was re-rendered and blur is gone, but other parts of the page are still blurry (see the bottom, https://ibb.co/GxsGwmf)

I'm on Ubuntu 22.04 with Xorg, my screen is 7680x4320 with following .Xresources file:
Xcursor.size: 32
Xft.dpi: 120
Xft.Antialias: 1
Xft.Hinting: 1
Xft.HintStyle: hintfull
Xft.rgba: vrgb

And similar xsettingsd.conf:
Net/IconThemeName "Custom"
Net/ThemeName "Adwaita-dark"
Gtk/CursorThemeName "DMZ-White"
Gtk/CursorThemeSize 32
Gtk/FontName "Ubuntu Regular 10"
GtkDecorationLayout "close:"
Xft/Antialias 1
Xft/Hinting 1
Xft/HintStyle "hintslight"
Xft/RGBA "vrgb"

I believe window size when this happens is 4608x2592, when I make window ~half that width (2302x2590), blur disappears, when resize back - gets blurry again without page reload (I use tiling window manager Qtile, so this splitting in half and back happens all the time.

I'm currently on 113.0a1 (2023-03-30), happens for me for a few days at least.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Widget: Gtk' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Nazar Mokrynskyi]

Now GitHub and Slack are blurry. Any other information I can provide or any tests to verify something?

Comment 3

[Nazar Mokrynskyi]

Anything else I can do to help debug this?
Both GitHub and Slack are blurry unless I make window size smaller, which is very annoying.
It is reliably reproducible on my machine too.

Comment 4

[Nazar Mokrynskyi]

Should this be also linked to https://bugzilla.mozilla.org/show_bug.cgi?id=1646044 and/or https://bugzilla.mozilla.org/show_bug.cgi?id=1889274?

Comment 5

[Nazar Mokrynskyi]

Those whole https://aws.amazon.com/ec2/pricing/on-demand/ is blurry to me right now unless opened on half of the screen, in contrast to other websites text selection doesn't help to remove the blur

Comment 6

[Martin Stránský [:stransky] (ni? me)]

Can you please test mozregression to find broken commit?
https://fedoraproject.org/wiki/How_to_debug_Firefox_problems#Use_Mozregression_tool
Thanks.

Comment 7

[Nazar Mokrynskyi]

2022-02-23 was the latest good version, 2022-02-24 is the first bad version, but mozregression wasn't able to download build artifacts.
2022-02-23 is blurry regardless of text selection, while more recent versions "fix" blurriness when text is selected (also text mores a bit). I can bisect that change as well if it seems valuable.

BTW above page is no longer blurry, but I was still able to reproduce it locally by saving a Slack page to disk, which is still reliably blurry.

Comment 8

[Martin Stránský [:stransky] (ni? me)]

Does Mozregression produce any commit range? What's the mozregression output?

Comment 9

[Nazar Mokrynskyi]

Attachment: mozregression output

As already said, it does not, here is the output:

Comment 10

[Martin Stránský [:stransky] (ni? me)]

There's the requested range:
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=add572d6012047244d022436e0b5c578b3dd7cf7&tochange=fb443d9a5f9cfaa17acc81c25473d7093d5cf696

Comment 11

[Martin Stránský [:stransky] (ni? me)]

Hm, I don't see any related commit which could cause it. Please attach your about:support page. Do you use screen/font scale?

Comment 12

[Nazar Mokrynskyi]

Attachment: about:support

Comment 13

[Nazar Mokrynskyi]

I use Xft.dpi: 120 as mentioned in the very first comment, which I guess qualifies as scaling relatively to the default 96

Comment 14

[Nazar Mokrynskyi]

Here is a public page that reproduces the issue and has horribly looking text: https://www.nervos.org/knowledge-base/comparing_blockchain_virtual_machines

And it is not just text, "Categories" section on the right is rendered in a severely broken way.

Comment 15

[Nazar Mokrynskyi]

Attachment: comparing_blockchain_virtual_machines.png

Screenshot of https://www.nervos.org/knowledge-base/comparing_blockchain_virtual_machines

Comment 16

[Martin Stránský [:stransky] (ni? me)]

Emilio, any idea here?
Thanks.

Comment 17

[Emilio Cobos Álvarez [:emilio]]

Hmm, so this is using X11 with fractional scaling which is probably not the best supported configuration. But not that it shouldn't work. Some questions:

• What's the window size? If you make the window size smaller, does it get fixed? I've seen similar things when WebRender hits the texture size limit and we have to downscale stuff (bug 1942271).
• Does this depend on the zoom factor of the website? E.g., if you Ctrl+ or so, does it stop reproducing?
• Does it happen on Nightly?

As I write this I realized I can reproduce on the website in comment 15 if I make my window wide enough (spanning my two monitors), and it gets "fixed" if I remove the mix-blend-mode: difference; that applies to the header. So yeah, I think this is tripping the same as bug 1942271, where we're hitting the texture size limit.

Can you confirm that the text becomes "good" again if you make your window smaller?

Comment 18

[Emilio Cobos Álvarez [:emilio]]

Nical, should the texture size limit be increased, or tweaked, or be dependent on the window size or something? See comment 17 (or bug 1942271 comment 0) for steps to repro. Bug 1942271 is fixable by fixing picture caching with rounded corners, but the general case of something like comment 15 where the page is just applying mix-blend-mode on the whole page seems harder to fix generally....

Comment 19

[Emilio Cobos Álvarez [:emilio]]

Attachment: Reduced test-case (load on a huge window to see crappy text rendering).

Comment 20

[Nazar Mokrynskyi]

What's the window size? If

Mentioned in the very first message

If you make the window size smaller, does it get fixed?
Can you confirm that the text becomes "good" again if you make your window smaller?

Yes, also mentioned in the very first message

Does this depend on the zoom factor of the website? E.g., if you Ctrl+ or so, does it stop reproducing?

Tried zooming https://www.nervos.org/knowledge-base/comparing_blockchain_virtual_machines in and out, still happens, wasn't able to find the scale at which it doesn't happen yet.

Does it happen on Nightly?

I use Nightly exclusively.

I have 65'' 7680x4320 screen and with standard 96 dpi it is a bit too small to read comfortably.
I acknowledge that this is not a very common setup and appreciate some attention to this issue.

Comment 21

[Nazar Mokrynskyi]

The viewport size when an issue is happening (measured by taking a screenshot of the page) is 4605x2497

Comment 22

[Nicolas Silva [:nical]]

Yeah it looks like we'll have to set the maximum texture size more dynamically and depend on the screen resolution or the window size.
It could be also addressed by having each picture cache tile do its own picture graph (do the filter for each tile instead of for the entire filtered region in one go), but that's a longer term plan.

Comment 23

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:gw, could you have a look please?

For more information, please visit BugBot documentation.

Comment 24

[Nazar Mokrynskyi]

How hard is it to do something about this issue?
Text is arguably the most basic thing a browser can render and even that doesn't work properly in Firefox.