After the recent updates, web fonts are blurry

[zangbob]

Captchas

• [X] I have read the instructions.
• [X] I have searched existing issues and avoided creating duplicates.
• [X] I am not filing an enhancement request.

What happened?

I usually use Microsoft YaHei fonts, and the fonts in previous versions are very clear.

Since the last 2-3 versions, the fonts are very blurry. I have adjusted the cleartype, but it still doesn't work. Edge and other Chrome-like browsers have no problems.

• You may need to download the images to your local computer to better compare the differences.

Reproducible?

• [ ] I have checked that this issue cannot be reproduced on Mozilla Firefox.

Version

1.0.0-a.37(x64)

What platform are you seeing the problem on?

Windows

Relevant log output

No response

[Keltirion]

+1 Same thing for me on mac using lates version.

[willcannings]

I'm also seeing this on macOS, for English text, and it doesn't happen in Firefox. A couple of things I've noticed that'll hopefully help narrow down the issue:

• When a part of the page gets redrawn (e.g I select some of the blurry text, or I mouse over an element that changes appearance on hover) the text is no longer blurry
• The text becomes blurry again as soon as the page is scrolled
• This problem only occurs on my external Dell monitor (I'm using a MacBook Pro laptop with the screen on). When I move the window to my MacBook screen it immediately looks fine (no blurriness, and no need to refresh the page or trigger a redraw)
• It seems to be related to screen resolution: I'm using a "non-native" resolution on my Dell monitor (2560x1440) and a "native" resolution on my laptop screen. When I change the resolution on my Dell to its "native" 1920x1080 the page looks fine again with no blurriness.

https://github.com/user-attachments/assets/d9b9fc5e-123b-44ae-803d-c150bc4c3aa3

[HarryHeres]

* It seems to be related to screen resolution: I'm using a "non-native" resolution on my Dell monitor (2560x1440) and a "native" resolution on my laptop screen. When I change the resolution on my Dell to its "native" 1920x1080 the page looks fine again with no blurriness.

If you're using non-native, in MacOS space that is basically a LowDPI mode. This is something we, to me knowledge, won't be able to overcome as the resolution directly affects how MacOS renders fonts. In order to achieve sharpness, consider switching to one of the native resolutions.

[HarryHeres]

Captchas

* [x]  I have read the instructions.

* [x]  I have searched existing issues and avoided creating duplicates.

* [x]  I am not filing an enhancement request.

What happened?

I usually use Microsoft YaHei fonts, and the fonts in previous versions are very clear.

Since the last 2-3 versions, the fonts are very blurry. I have adjusted the cleartype, but it still doesn't work. Edge and other Chrome-like browsers have no problems.

* You may need to download the images to your local computer to better compare the differences.
  ![edge](https://private-user-images.githubusercontent.com/9709262/365022815-65e3f227-6164-4a0e-a718-6b535363059a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU3NDI3ODAsIm5iZiI6MTcyNTc0MjQ4MCwicGF0aCI6Ii85NzA5MjYyLzM2NTAyMjgxNS02NWUzZjIyNy02MTY0LTRhMGUtYTcxOC02YjUzNTM2MzA1OWEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkwNyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MDdUMjA1NDQwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MjE0YzcxZTExMWI1N2Q2YjY3ODg2MDgzMzk1YTM1YWU0Yzc0ZDRkYTEyMzRhMmYyZDQ4ZjlhZTcwYWI1NjM0NyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.XpXSKQl0pqfQv9KY-Cr_fPpilutobyJ5Fva6lT6_bQs)
  ![zen](https://private-user-images.githubusercontent.com/9709262/365022832-a0f5cbd4-8041-4a9e-8cb2-45af3f93b8aa.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU3NDI3ODAsIm5iZiI6MTcyNTc0MjQ4MCwicGF0aCI6Ii85NzA5MjYyLzM2NTAyMjgzMi1hMGY1Y2JkNC04MDQxLTRhOWUtOGNiMi00NWFmM2Y5M2I4YWEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkwNyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MDdUMjA1NDQwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NjI3YjI4NDQxODM1N2JlOTc2YWVhZDFkMTZkODRlYTY4M2NiZGJiMGM1Mjg3ZGI1N2YwNGNhYjgxODA5YzEwOSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.PCkUd5CPnWZSb-tp2axOifGR7aMN9TgqKyA8TEpYdTQ)

Reproducible?

* [ ]  I have checked that this issue cannot be reproduced on Mozilla Firefox.

Version

1.0.0-a.37(x64)

What platform are you seeing the problem on?

Windows

Relevant log output

No response

Can you test this behaviour with a vanilla Firefox?

[zangbob]

I tested it with firefox 115.15.0 ESR (X64) and this problem did not occur.

[hadiskeini]

* It seems to be related to screen resolution: I'm using a "non-native" resolution on my Dell monitor (2560x1440) and a "native" resolution on my laptop screen. When I change the resolution on my Dell to its "native" 1920x1080 the page looks fine again with no blurriness.

If you're using non-native, in MacOS space that is basically a LowDPI mode. This is something we, to me knowledge, won't be able to overcome as the resolution directly affects how MacOS renders fonts. In order to achieve sharpness, consider switching to one of the native resolutions.

I can corroborate that on macOS using a scaled resolution plays a factor in this issue. I am using a monitor that is natively 4k with the scaled resolution 3008 x 1692 (HiDPI), which is effectively 6016 x 3384 downscaled to 4k.

However, this issue is Zen exclusive and does not occur in vanilla Firefox.

On Zen, when the browser window is small, font rendering is fine. As soon as I resize Zen to take up like 75% of the monitors width (window height does not play a factor), font rendering becomes blurry. During resize, the fonts (or whole website) in Zen also seem to jitter, moving very slightly up and down (on what seems a subpixel level) which ultimately seems to cause the blurriness. I can resize the current GitHub window I am at in a way that links with underlined text have the underlining disappear due to the vertical movement.

So to summarize: Resizing the browser window is normal/stable until a particular width is reached. From then on Zen does something that causes the website to move leading to blurry font rendering.

[willcannings]

* It seems to be related to screen resolution: I'm using a "non-native" resolution on my Dell monitor (2560x1440) and a "native" resolution on my laptop screen. When I change the resolution on my Dell to its "native" 1920x1080 the page looks fine again with no blurriness.

If you're using non-native, in MacOS space that is basically a LowDPI mode. This is something we, to me knowledge, won't be able to overcome as the resolution directly affects how MacOS renders fonts. In order to achieve sharpness, consider switching to one of the native resolutions.

This isn't an issue in other browsers though, including Firefox. If you have a look at the screen recording I attached you can see the rendering of the text changing (becoming clearer) when I select text (triggering a redraw) or mouse over an element with different hover styling (i.e also triggering a redraw). It's subtle, but very noticeable and distracting when you're interacting with a page, and no other browser I've used has the same issue.

[bravecrayon]

Also reported in #440

[HarryHeres]

Aggregating into #440

[Keltirion]

It is fixed for me after recent updates.

[Balssh]

Still happening on NixOS, using Zen 1.0.1-a.8 on Flatpak. Firefox (first photo) is fine:

[dosubot[bot]]

Hi, @zangbob. I'm Dosu, and I'm helping the desktop team manage their backlog. I'm marking this issue as stale.

Issue Summary:

• Blurry web fonts, especially Microsoft YaHei, reported in version 1.0.0-a.37(x64) on Windows.
• Similar issues confirmed by other users on macOS, linked to non-native screen resolutions.
• Suggestions indicate macOS font rendering in LowDPI modes might be the cause.
• Issue aggregated into related issue #440; some users noted improvements after updates.
• Still unresolved for some, with reports of persistence on NixOS with Zen 1.0.1-a.8.

Next Steps:

• Please confirm if this issue is still relevant with the latest version of the desktop repository.
• If no further updates are provided, the issue will be automatically closed in 7 days.

Thank you for your understanding and contribution!

[amagnolo]

The issue is still happening in Zen 1.0.1-a.19 on Pop Os. Blurred font when the window is large.

[dosubot[bot]]

@mauro-balades, the user has confirmed that the blurry font issue is still occurring in Zen 1.0.1-a.19 on Pop OS when the window is large. Could you please assist them with this ongoing problem?

[amagnolo]

also reported in #2671 and #2375

[kyconfii]

Still happens on mac with version 1.0.2-b.3 with fractional scaling. More specifically with 4k set to 1440p it still happens when window is maximized. When set to native or 1080p though it disappears. Seems to be a problem with fractional scaling.

[johanohly]

Can also confirm that this happens on Ubuntu with fractional scaling on 125%, with Zen being maximized on a 49' monitor. When resized to a smaller window, the issue also disappears.

(Not an issue in Firefox)

[TKasperczyk]

1.0.2.b.5-1 - still an issue with 150% scaling, 3840x2160, wayland. Setting zen.view.experimental-rounded-view to false partially fixes it, but some websites still display blurry text, like about:support

[thevllad]

I have the same issue on Windows. ClearType smoothing doesn't work either on web pages or in the interface (except for system elements, like the context menu).

Setting the parameter zen.view.experimental-rounded-view to false partially resolves the issue, but ClearType still doesn't work in the interface.

(Not an issue in Firefox)

[syscat29]

I have the same issue on Windows. ClearType smoothing doesn't work either on web pages or in the interface (except for system elements, like the context menu).

Setting the parameter zen.view.experimental-rounded-view to false partially resolves the issue, but ClearType still doesn't work in the interface.

(Not an issue in Firefox)

What about disabling hardware acceleration?

[thevllad]

What about disabling hardware acceleration?

I haven't noticed any changes

[syscat29]

What about disabling hardware acceleration?

I haven't noticed any changes

Never had this issue myself to be honest, windows / linux different fonts and configurations, always render fine . . . Are you on the latest release?

[thevllad]

Are you on the latest release?

Yes, on the latest version, I specifically reinstalled it and compared it with Firefox and Chrome until I figured out what the problem was.

Although the fonts in the interface don't cause as much discomfort compared to web pages, I just noticed that, for example, in Firefox, there is smoothing in the tab names.

[4ndv]

Just updated to 1.6b, issue is still present:

After I select that blurry text, it becomes normal, until window loses focus.

EndeavourOS, 4K screen with 150% scaling, installed via AUR

Setting zen.view.experimental-rounded-view to false seems to fix it on websites, but about:config, about:support and some other places are still blurry

[TeddyHuang-00]

Setting zen.view.experimental-rounded-view to false seems to fix it on websites, but about:config, about:support and some other places are still blurry

Can confirm this works for me on Zen 1.6b. You saved my day!

[4ndv]

EndeavourOS, 4K screen with 150% scaling, installed via AUR

Issue persists on the different machine (laptop) with the same OS and the same display settings

[immadolf]

Setting zen.view.experimental-rounded-view to false seems to fix it on websites, but about:config, about:support and some other places are still blurry

And about:preferences

[syscat29]

Setting zen.view.experimental-rounded-view to false seems to fix it on websites, but about:config, about:support and some other places are still blurry

And about:preferences

Have you tried disabling hard acceleration yet?

[immadolf]

Setting zen.view.experimental-rounded-view to false seems to fix it on websites, but about:config, about:support and some other places are still blurry

And about:preferences

Have you tried disabling hard acceleration yet?

@j14i i tried,but still blurry

[littleblack111]

i forgor what i set but it's something in between here, but this css makes it blurry again(in userChrome.css):

browser {
  /* for some reason, this is needed to enable blurring */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}