1933130 - Tab bar content renders blurry on large displays

Status: UNCONFIRMED

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

Description

[[:mnrx]]

Attachment: tab-bar-blur.av1.webm

Steps to reproduce:

Version: Firefox Developer Edition, 133.0b9 (64-bit), macOS

This occurs when using Firefox on a large display (5K, 2× UI scaling). In some testing, the Firefox window being 2168 or more UI pixels wide allowed the blurring to present.

On a smaller display, I would expect the bug can be reproduced by moving the Firefox window mostly off-screen and then widening it to fill the screen again.

Switch focus to another application or Firefox window while

The tab titles and icons in the now-blurred window are no longer rendered correctly. Text is blurry and website icons appear as though they've been scaled poorly. Re-focusing the window immediately fixes the bug. The bug only presents when the window is large enough, i.e., 2168 UI pixels or wider.

Additionally, blurring can be seen for 6 frames (0.1 seconds) when switching focus to the Firefox window.

I speculate that this bug is related to bug 1933129, particularly if the tab bar in Firefox is implemented as a web view.

Comment 1

[[:mnrx]]

Attachment: tab-bar-blur.vp9.webm

Add VP9 version of video.

Comment 2

[[:mnrx]]

Attachment: Composite of screenshots showing tab bar blurred rendering bug.

Add image illustrating bug.

Comment 3

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

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

Comment 4

[:Rhiven]

This same thing happens for me in Windows 10 with Firefox 133 on a 32:9 monitor if the window is too large.

Comment 5

[[:mnrx]]

Thank you, :Rhiven! The fact that the issue also occurs on Windows is significant. Could you also test bug 1933129?

Comment 6

[Blueprint Coding]

I can confirm that this bug happens on my Large ultrawide monitor as well.

5120x1440 at 150% windows scaling (happens regardless of the windows scaling setting).

Comment 7

[Blueprint Coding]

(In reply to Blueprint Coding from comment #6)

I can confirm that this bug happens on my Large ultrawide monitor as well.

5120x1440 at 150% windows scaling (happens regardless of the windows scaling setting).

Whoops hit submit before I was ready.

Does not happen on my 2560x1080 monitor. When it is not focused it seems to just slight dull the tabs colors instead of blurring which I believe is the intended effect.

Windows 10, Firefox 133.0.3

Here is a video of the bug in action.

I also can confirm I have the same issues on the sites shown from the original poster on bug 1933129.

Comment 8

[Fredric D]

[Tracking Requested - why for this release]:

This bug is still an issue in 136.0.2

I use a 32:9 monitor at 5140x1440 res and tabs get blurry when window is above 4k in width (Approximately).

Picture of tabs: https://i.imgur.com/UnCE4C9.png

Comment 9

[Donal Meehan [:dmeehan]]

Removing tracking, this is not an appropriate use of release tracking.
:bhood could this be triaged? Looks like there is some detail here.

Comment 10

[Moritz Beier [:mbeier]]

I also have this issue, but cannot reproduce it on a new profile. Using mozregression and the affected profile, I found the last good build to be from 2023-12-17, and the first bad build to be from 2023-12-18, but it wasn't able to bisect further.

I'm pretty sure my profile only turned bad in the last week or two.

I'm using macOS ARM on a 3840x2160 monitor scaled to 2560x1440.

Comment 11

[[:mnrx]]

:mbeier—how have you tested this? I would not expect this bug to present on a 2160p monitor unless you manually stretched the window beyond the width of the screen. Additionally, if you've used the "Displays" Preference Pane or a third-party program such as SwitchResX to re-scale your desktop, macOS and Firefox are likely only be rendering at 2560×1440, comfortably within the suspected limit of 4096 pixels.

When I've previously used the phrase "display pixel", I've been referring to a pixel in the final output framebuffer. The physical display panel may have a greater resolution and be performing its own upscaling.

I've seen this bug in several profiles. I just created a new profile in Firefox 137.0b10 and it too exhibits both this bug and bug 1933129.

Comment 12

[Moritz Beier [:mbeier]]

I think it actually renders everything at 2x the scaled resolution (5120×2880 for 2560x1440) and then downsamples to the physical resolution.

But I missed the part of your comment about the window size. I tried again, and the only relevant part about my profile was the window size. The regression range I found totally works with clean profiles, you just need to maximize the window first.

Comment 13

[[:mnrx]]

Attachment: Composite of screenshots showing tab bar blurred rendering bug at 8191 CSS `px` wide.

Comment 14

[[:mnrx]]

Sorry, :mbeier—I don't understand the second part of your comment. Are you still experiencing the bug?

The blurring I've seen is very subtle, and I'm not sure I'd even notice it amongst the blur introduced by downscaled from 5120×2880 to 3840×2160.

I just tried moving the window partly off-screen and stretching it back into the screen in order to push its width beyond that of the display. I managed to make the viewport 8191 CSS px wide before Firefox crashed. Since this is so close to 8192, I speculate that there's a limit of 16384 pixels on some internal data structure. This is separate from the threshold that causes the blurring effect.

At this window size, the blurring of the tab bar is greatly exaggerated, making the text almost unreadable. I've attached another screenshot showing this beside normal behaviour.

Comment 15

[Moritz Beier [:mbeier]]

Yes, if I maximize the window.

Comment 16

[Fredric D]

Someone found a workaround that helped me: https://old.reddit.com/r/firefox/comments/1h8zft3/tabs_blurry_when_out_of_focus/mqihslp/

The question is, why doesn't the blurring occur on smaller displays/windows

Comment 17

[Bob Hood [:bhood]]

Adding to triage.