Glitchy 2x pixel density visual issue

[bravecrayon]

What happened?

I'm on a Mac using the Apple Studio Display running at 2560x1440 at 2x pixel density (Retina). Many things appear to be about 1.5x pixel density until you rollover them. This doesn't happen in FireFox. I've included two GIFs demonstrating the issue.

Reproducible?

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

Version

1.0.0-a.27

Severity impact

Medium

What platform are you seeing the problem on?

macOS - aarch64

Relevant log output

No response

[TomFaulkner]

I'm seeing the same for all text on Linux.

Text looks terrible until the mouse hovers over it, then it seems to correct itself. This on Arch with Hyprland, no scaling on an ultrawide 5120x1440 resolution. I've used 23 and 27, both have this issue.

[tangowithfoxtrot]

I'm on macOS, and I also have a 5120x1440p (32:9) monitor, and noticed that the blurry font manifests itself if you make the window width wider than ~4080 pixels (based on my imprecise usage of the responsive design tool). The webview itself can stretch wider than this width, but if the browser window gets wider than that, the fonts become blurry. Reducing the window width makes the fonts clear again.

recording.mp4

[jessedobbelaere]

Can confirm that I see the same behavior as @tangowithfoxtrot on my MacOS with an LG Ultrafine 5K monitor (set to 2560x1440 resolution with @2x but the native resolution is 5120 x 2880).

When I open a Wiki page with Zen, and make the window larger than 2046px@2x it switches to blurry text rendering. It's as if there's a breakpoint. Some text is sharp, some is blurred. Some characters have glitches even.

When making the browser half of the screen width (2045px or smaller) its crisp text

[bravecrayon]

Same for me, except it might be <2047 it is sharp. As the window is widened above ~2046 it seems like the text flips between blurry and sharp very quickly, but always finally lands on blurry.

On a hunch, I thought if I could find a high resolution test pattern it might show up when it becomes blurry. I found one, and it is pretty evident in the horizontal resolution pattern. It can be seen that the thin lines become blurry. Also, it can be seen that blurriness actually isn't a static effect because the interference pattern changes as the width of the window changes. I created this to demonstrate: https://codepen.io/bravecrayon/full/MWMXpoa.

[TomFaulkner]

I can't tell with the test pattern, but making the window smaller fixes font rendering.

[NyxErinys]

Wanted to jump in here with some more pictures and say same thing happening in Gnome (Wayland) on Arch linux with a 5120x1440 montior at 1x scaling

[maxsteenbergen]

Experiencing the exact same thing as @jessedobbelaere : iMac 5k, sharpess restored when text is selected. It's not just text though: single pixel borders (like the ones in this Github thread) also blur.

[krabf]

I've been having the same issue ever since I started using Zen browser, especially on YouTube and it's definitely annoying. I'm also using a Mac with Studio Display. I have to scroll through the entire page or reload for it to fully render/remove the blurred out texts. Hopefully this will be fixed.

[osborng]

Same issue for me as well. Mac with Studio Display.
Example page text at full screen

Example page text at full screen after moving mouse over the text

[bravecrayon]

I know the issue hasn't been addressed or worked on, but I thought I'd just mention I updated to 1.0.0-a.39 today and it's still a thing.

[harryheres]

Thank you for keeping eye on things! We will get to this as soon as possible, but there are still issues that require our prior attention.