Blurred fonts in 1.0.1-a.14

[maxsteenbergen]

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?

This issue has been reported and fixed before, but now with 1.0.1-a.14 on a 5K iMac, fonts have become blurry again. The issue seems to become progressively worse with increasing window size as evidenced by this screenshot.

I disabled all zen mods to rule them out.

Reproducible?

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

Version

1.0.1-a.14

What platform are you seeing the problem on?

macOS - Intel

Relevant log output

No response

[dosubot[bot]]

Hey @maxsteenbergen! 👋 I'm here to help you with any bugs, questions, or contributions. I'm Dosu, a bot designed to assist you while waiting for a human maintainer. Let's tackle this issue together!

I found two similar closed issues related to blurry fonts:

1. Blurry font bug reappeared - This issue was caused by the "Super Url Bar" theme/mod. Disabling or removing this theme/mod resolved the blurry font issue. It was last updated on October 05, 2024.

2. There is an issue that the interface and web font are blurred. (1.0.0-a.37) - This issue was also closed and last updated on September 05, 2024.

Since you've already disabled all zen mods, it might be worth checking if any other themes or settings could be affecting the font rendering.

To continue talking to Dosu, mention @dosu.

[carabistouflette]

I got the same issue on Linux with hyprland. I got the problem when updating to a.13

[rrpolanco]

I'm running 1.0.1-a.14 on MacOS(arm) and there seems to be a rendering issues where the page flickers and the fonts indeed look blurry. Please fix this!

[maxsteenbergen]

I found that setting zen.view.experimental-rounded-view to false in about:config resolves the issue. Very likely it's the mix-blend-mode statement in zen-browser-container.css that's the culprit

[bernardodsanderson]

Nice fix @maxsteenbergen, worked for me!

[Redcupss]

Worked for me too as long as Super Url Background blur setting is switched off.

[shrimpwtf]

zen.view.experimental-rounded-view

works as a temporary fix but now the corners are a bit ugly. better than blurry font though haha

[skegel13]

It's not as bad, but I've noticed this issue in Firefox, too, so I don't think it's completely related to Zen. For me, it happens with my ultra-wide (5120x1440). Firefox seems to do a better job of correcting it, but I still get a flash of the blurry fonts. Zen usually just stays blurry.

[nanolookc]

Not seeing this at firefox at all, checked on the same websites. zen.view.experimental-rounded-view fixed the issue, thanks!

[mauro-balades]

Does this only happen in macos? Also, does anyone know how to use the browser's UI devtools?

[skegel13]

Does this only happen in macos? Also, does anyone know how to use the browser's UI devtools?

For me, yes, only happening with my ultra-wide (5120x1440) in MacOS. The zen.view.experimental-rounded-view setting fixed it for me.

I can also inspect the browser chrome. Anything in particular you are looking for?

[skegel13]

Doing some more testing and I think it's a rendering issue with Firefox in general. The zen.view.experimental-rounded-view fixes blurring for most pages, but I'm guessing if whatever styling that's removing is being used on a page somewhere else, the blurriness comes back. For example, on MacOS with an ultrawide (5120x1440), I get blurry text on both Zen and Firefox when using Linear (linear.app). Zen can likely fix most pages by removing the specific styling in the browser chrome, but this seems like a larger Firefox issue in general.

[maxsteenbergen]

I will agree that this might originate from the original Firefox source. I can remember the same issue happening in stock Firefox several years back. That being said, given that disabling the experimental setting basically amounts removing one CSS rule that creates a new stacking context, it does give some clue. Maybe adding an isolation: isolate; rule somewhere in Zen's CSS is a more constructive fix?

[HarryHeres]

Can confirm (https://github.com/zen-browser/desktop/issues/707#issuecomment-2445323181), looking into this.

Unable to experience this on pure Firefox 132.0 (maybe a little, but definitely not as noticeable).

[ralphsun73221]

This issue was fixed before a14, but for some reason it started appearing again in a14, at least that's the case for me.

[limonkufu]

It seems like this is the same issue as this one coming back: https://github.com/zen-browser/desktop/issues/440

[mauro-balades]

I will agree that this might originate from the original Firefox source. I can remember the same issue happening in stock Firefox several years back. That being said, given that disabling the experimental setting basically amounts removing one CSS rule that creates a new stacking context, it does give some clue. Maybe adding an isolation: isolate; rule somewhere in Zen's CSS is a more constructive fix?

Adding isolation: isolate; to the browser element fixed it for you?

[maxsteenbergen]

I haven't been able to check it in this case, but it did work a while back in a different situation that had some rendering issues.

[nanolookc]

Also, have blurred fonts in devtools. Fix above doesn't work for that.

[maxsteenbergen]

@mauro-balades I'd love to take a deeper dive into this myself but I can't get Zen to build. The docs mention a dependency on Windows (mozbuild.exe) but I'm on macOS. Any chance on updating the docs to getting local build on Mac working, so I can help out?

[HarryHeres]

Update - happens only on external monitor for me when running a HiDPI resolution. On native Mac screen, it seems okay. Removing mix-blend-modedoes resolve this issue.

[ralphsun73221]

I just updated to a15, and I still need to set zen.view.experimental-rounded-view to false to avoid this issue.

[mauro-balades]

@HarryHeres can I leave this to you?

[HarryHeres]

@HarryHeres can I leave this to you?

Sure thing, on it already

[sladiri]

I got blurry fonts too. I am on Windows and using an 8K monitor. zen.view.experimental-rounded-view=false helps for me too.

[say4n]

This exists in 1.0.1-a.17 as well and the suggested workaround still works.

[HarryHeres]

Just an update - have a potential fix ready, just need to figure out the build issues on Mac.

[mauro-balades]

I've disabled it by default for macos, until we fix this

[ShawakSaraf]

Version 1.0.1-a.17 (64-bit): Text rendering is inconsistent. In the above image, some lines are rendered correctly and some are blurry.

[gautierlabarre]

I've noticed the same issue on a.17 if it's in fullscreen, and it's easily testable (for me) when I open the dev tools all the fonts on the dev tools are blurry, it tries to adapt and becomes good until I move the mouse, and it blurs as well.

I tried the settings listed above at false (same issue) but I have the mods super url with blur, maybe it's related, I can test to disable it if you think it can help. Also, I am on a 4k monitor and enabled the zoom on text (and text only)

[luisfscoelho]

It still happens on the a.19.

[rutger1140]

Just confirming the fix of zen.view.experimental-rounded-view=false works on Wayland / Ubuntu 24.10 / 5K display.

[thomasaldershof]

Setting zen.view.experimental-rounded-view to false does not fix this problem for me on Windows 11 / 5120x1440.