2060587 - [Nova] Buttons with purple or colored borders appear pixelated on Windows

Status: RESOLVED INVALID

(Firefox :: Theme, defect)

Description

[Simona Badau, Desktop Test Engineering]

Attachment: Screen recording with the issue

Found in

• Nightly 155.0a1

Affected versions

• Nightly 155.0a1

Tested platforms

• Affected platforms: Windows 11 x64, Windows 10.
• Unaffected platforms: macOS 26, Ubuntu 24.04

Preconditions

• Ensure Nova is enabled.
• The Dark theme is enabled in Firefox.

Steps to reproduce

1. Open a new tab and observe the rounded corners of the active tab.
2. Open the Add-ons Manager -> Themes -> observe the Settings button and the Enable buttons.
3. Open the Sidebar -> Settings -> Observe the X button.

Expected result

• All the buttons that have purple or colored borders should be rendered smoothly.

Actual result

• Buttons with purple or other colored borders appear pixelated on Windows, especially when the Dark theme is enabled. The issue is less noticeable when the Light or System themes are enabled. Please see the attached screen recording for more details.

Regression range

• This issue is introduced with the new Nova styling.

Additional notes

• The issue is reproducible only on Windows. It is not reproducible on macOS or Ubuntu.
• Reproduced on a Dell G5 5590 laptop with Windows display scaling set to 100%.
• Noticed it also on the Sign In button in the Account menu for cached signed-out users.

Comment 1

[Stuart Colville [:muffinresearch]]

Maybe this is a similar graphics issue to bug 2059667 ?

Comment 2

[Nicolas Silva [:nical]]

Attachment: nova-gradient-border.html

Attempt at extracting nova's gradient border into a test case more amenable to the investigation.

This was made by claude, I would appreciate if someone who works on nova could confirm that this is using the same method to produce the borders.

Comment 3

[Nicolas Silva [:nical]]

Perhaps it is the video quality/compression but I am not seing pixelated borders here. The border looks correclty anti-aliased and rendered at the resolution of the screen to me. I also looked closely with a local build and it doesn't look like the border is rendered incorrectly to me.

The attached test case looks the same in chrome.

I wonder if what is being called pixelated here is the fact that a when rendering a 1px rounded border, few of the pixels along the border land exactly at the center of the border which is the only place for a 1px anti-aliased border where the pixel would completely light up. Most of the pixels along the border land somewhere close but it can give a an impressiong that the intensity of the color is uneven along the border, and that's made visible because of the high contrast between the border and the background. If so then it's a fundamental sampling issue, and we can't do anything about it other than doubling the resolution or the border width.

Comment 4

[Nicolas Silva [:nical]]

I think that I've ruled out this being a rendering bug. I'm happy to be proven wrong but I need at least a minimal test case that shows the difference between firefox and other browsers, and ideally a regression range if this needs another pass from someone in the graphics team.

Comment 5

[Stephen Thompson [:sthompson]]

Attachment: edge-versus-firefox.png

Microsoft Edge Version 151.0.4129.59 (Official build) (64-bit) on the left
Mozilla Firefox 153.0 (64-bit) on the right

Windows 11 Home 25H2 26200.8875 with Nvidia graphics

I don't see a difference in rendering behavior for the same border, so I'm closing this as invalid.