2004925 - Vertical tabs cause blurry UI and page content

Status: RESOLVED FIXED

(Core :: Graphics, defect)

Description

[Martin Balfanz [:mbalfanz]]

Attachment: blur.mp4

Vertical tabs seem to cause blurry pages and Firefox UI. I noticed this first on Slack, when text and image sharpness changed on hover or when scrolling, but could also reproduce this on about:support and in the devtools UI.

STR:

• open Firefox in a clean profile
• visit for example about:support
• switch on vertical tabs
• observe. If you can't see a difference, scroll for a bit or change the window size

ER: text should be sharp

AR: text is blurry

Tested on MacOS 15.7.2 with the latest Nightly (148) on a 4k screen. See video attached

Comment 1

[Alice0775 White]

In Windows 11, enabling vertical tabs causes text to become grayscale AA instead of subpixel AA.

Comment 2

[Martin Balfanz [:mbalfanz]]

I ran mozregression. Unfortunately, there are many skipped builds and the result window is not very narrow: https://hg-edge.mozilla.org/mozilla-central/pushloghtml?fromchange=bde1ea11f25af539acccf38965f2c6c14f4f72d3&tochange=29c957dc0c6f710ef5e2471560a1f49e7c655db9

It was basically when vertical tabs/the new sidebar got introduced. I somehow have a feeling that the issue is related to the rounded corners of the viewport.

Comment 3

[Martin Balfanz [:mbalfanz]]

Attachment: devtools.mp4

Adding a video, showing that devtools is also affected.

Comment 4

[Martin Balfanz [:mbalfanz]]

Did some further digging, and it seems to be related to translate: 0 here: https://searchfox.org/firefox-main/source/browser/themes/shared/sidebar.css#244

When I toggle this off in the browser toolbox, text is sharp again.

Comment 5

[Teodor Tanasoaia [:teoxoy]]

I can't reproduce this on Windows 11 with Firefox Nightly 148.0a1 (2025-12-10). Is it only reproducible on MacOS?
Could you share the content of your about:support?

Comment 6

[Martin Balfanz [:mbalfanz]]

Attachment: about:support

Comment 7

[Martin Balfanz [:mbalfanz]]

Attachment: Screenshot 2025-12-10 at 16.41.19.png

Added my about:support output. I'm testing this on MacOS, can test in Win 11 a bit later.

One more note, which might be relevant: I'm using a scaled display resolution

Comment 8

[Martin Balfanz [:mbalfanz]]

Can't reproduce this on Win11

Comment 9

[Teodor Tanasoaia [:teoxoy]]

Could you confirm this is related to the sidebar.revamp.round-content-area pref? It's only enabled in nightly right now (per Bug 1993436).

Comment 10

[Martin Balfanz [:mbalfanz]]

I can't confirm that flipping this pref resolves the issue for me.

It seems to do the trick on the STR on about:support, but I can still reproduce the issue e.g. on Slack.

However, I can confirm that it doesn't seem to reproduce on the release channel.

(edit: sorry, message went out too early)

Comment 11

[Martin Balfanz [:mbalfanz]]

It seems like flipping the pref off resolves the issue on pages like about:support, and in devtools. What I'm observing on sites like Slack is a similar effect that still reproduces, but it may have a different cause. I'll keep testing

Comment 12

[BugBot [:suhaib / :marco]]

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

For more information, please visit BugBot documentation.

Comment 13

[:Gijs (he/him)]

(In reply to Alice0775 White from comment #1)

In Windows 11, enabling vertical tabs causes text to become grayscale AA instead of subpixel AA.

Text where? In the tab labels, or the chrome, or the content area, or all of the above?

Comment 14

[Alice0775 White]

Attachment: revamp sidebar on .vs. off

(In reply to :Gijs (he/him) from comment #13)

(In reply to Alice0775 White from comment #1)

In Windows 11, enabling vertical tabs causes text to become grayscale AA instead of subpixel AA.

Text where? In the tab labels, or the chrome, or the content area, or all of the above?

The page is about:support .
Simply enabling the revamp sidebar switches to grayscale AA, while disabling it switches to subpixel AA.

Comment 15

[:Gijs (he/him)]

(In reply to Alice0775 White from comment #14)

Created attachment 9538044 [details]
revamp sidebar on .vs. off

(In reply to :Gijs (he/him) from comment #13)

(In reply to Alice0775 White from comment #1)

In Windows 11, enabling vertical tabs causes text to become grayscale AA instead of subpixel AA.

Text where? In the tab labels, or the chrome, or the content area, or all of the above?

The page is about:support .
Simply enabling the revamp sidebar switches to grayscale AA, while disabling it switches to subpixel AA.

I can't reproduce this. Can you reproduce on a clean profile, and/or did this maybe get fixed since you commented here? I took a screenshot of about:support when the revamp sidebar is enabled on nightly and examined it in MS paint and I can see subpixel (multicolor) AA rather than grayscale AA.

Comment 16

[Alice0775 White]

No longer reproduce the issue of comment#14 on Nightly152.0a1 Windows11.

Fixed window:
https://hg-edge.mozilla.org/integration/autoland/pushloghtml?fromchange=006ec4b56f1962c719ebb06add47c270d69a1f88&tochange=d7f12a1404635f04c0d345fdbd942cd8b6ac9cfa

So, Bug 2013682 have seemed to fix the issue of comment#14.

Comment 17

[Sarah Clements [:sclements]]

Hi Martin, are you still seeing this issue on mac or did the bug in comment 16 fix this for you too? I'm struggling to see blurriness.

Comment 18

[Martin Balfanz [:mbalfanz]]

No longer reproduces on MacOS, seems to be fixed by the same window as per comment#16

Comment 19

[:Gijs (he/him)]

Thanks for confirming!