Closed Bug 1919439 Opened 1 month ago Closed 1 month ago

sound-playing icon looks bad (outline is aliased)

Categories

(Firefox :: Theme, defect, P1)

Firefox 132
Unspecified
Windows 11
defect

Tracking

()

RESOLVED FIXED
132 Branch
Tracking Status
firefox-esr115 --- unaffected
firefox-esr128 --- unaffected
firefox130 --- unaffected
firefox131 --- unaffected
firefox132 + fixed

People

(Reporter: caspy77, Assigned: dao)

References

(Regression)

Details

(Keywords: polish, regression, Whiteboard: [fidefe-sidebar])

Attachments

(8 files, 1 obsolete file)

I am not someone with super strong UI tastes, but I'm running Nightly and recently noticed that the sound-playing icon changed. I'm on Windows 11 in dark mode and to me the circle around it looks jagged and...not good.

Keywords: polish, regression
Regressed by: 1911889
See Also: 1911889
Summary: sound-playing icon looks bad → sound-playing icon looks bad (outline is aliased)
Whiteboard: [fidefe-sidebar]

Set release status flags based on info from the regressing bug 1911889

The bug is marked as tracked for firefox132 (nightly). We have limited time to fix this, the soft freeze is in 7 days. However, the bug still isn't assigned.

:cbellini, could you please find an assignee for this tracked bug? Given that it is a regression and we know the cause, we could also simply backout the regressor. If you disagree with the tracking decision, please talk with the release managers.

For more information, please visit BugBot documentation.

Flags: needinfo?(cbellini)
Flags: needinfo?(cbellini) → needinfo?(sclements)
Severity: -- → S4
Flags: needinfo?(sclements)
Priority: -- → P1

I'll have someone pick this up early next week but its likely this will need an early beta uplift.

Daniel, do you have advice on how to fix this? Easy reproduction is something like:

  1. open tab
  2. from the browser console, run gBrowser.selectedTab.setAttribute("soundplaying", "true") and gBrowser.selectedTab.setAttribute("indicator-replaces-favicon", ""). Then hover over the tab.

From what I can tell this is being rendered by a border-radius. I don't know why the antialiasing would be better/worse in some situations - on my display on Win11 it looks pretty reasonable... but it's possible we're simply running into bug 1724057 here, maybe?

Caspy, what Windows "Scale" and "Text size" settings are you using? And how hidpi (or otherwise) is your display?

Flags: needinfo?(dholbert)
Flags: needinfo?(caspy77)
Attached image screenshot on Linux

I can reproduce (circle looks jaggy to my eye at least), on Ubuntu 24.04, with 100% pixel scaling (no HiDPI). I included the circular Firefox and Google logos in other tabs (in a background window) in my screenshot for reference.

I don't have any suggestions/insight offhand, but bug 1724057 does seem potentially-relevant, yeah.

Flags: needinfo?(dholbert)

It might just be that the circle here is too thin to be antialiased nicely, particularly at this resolution?

In my screenshot, the circle seems to be 16px wide (8px radius), and it looks like the border is 1px thick. I'm not a designer but I don't know if it's really possible to get a nice-looking 1px-thick line at that sort of resolution, especially one that's sandwiched between the colors that we've got here. Most of the pixels that we want to draw will end up overlapping multiple display-pixels and getting the desired color antialiased away.

Here's the cropped icon from my screenshot, scaled up 10x, to make it a bit easier to see the pixels that we're drawing (and how there really aren't many of them -- it's 16x16 as noted in my previous comment).

I think this is essentially a reduced-testcase of just the icon (written by hand based on copypasting various bits from the browser toolbox).

Attached file reduced testcase
Attachment #9426576 - Attachment is obsolete: true
Attachment #9426576 - Attachment description: reduced testcase → [first version of reduced testcase; reattached to clean up slightly]

(In reply to Daniel Holbert [:dholbert] from comment #6)

It might just be that the circle here is too thin to be antialiased nicely, particularly at this resolution?

The problem might also be partly that the circle's color isn't different-enough from the gray tab-background color -- so many of its antialiased pixels end up looking indistinguishable from the surrounding background-color, so your eyes don't interpret those pixels as being part of the smooth curve of the circle. And if you ignore those pixels, the circle does indeed seem jagged.

To the extent that that explains the problem here (and I'm not entirely sure if it does) maybe we'd get nicer results if we changed to circle to a whiter shade (note that the icon itself gets fill:white via context-fill, so this would be consistent with the icon at least)? Then the increased contrast make it easier to distinguish between antialiased-circle-perimeter-pixels vs. regular-background-pixels.

FWIW Upping the border-width to 1px is one way to reduce the jagged outline (if the heavier outline is acceptable). See attached testcase showing the before and after.

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

Caspy, what Windows "Scale" and "Text size" settings are you using? And how hidpi (or otherwise) is your display?

Caspy's screenshot shows the image as being 24-by-24 device pixels, FWIW, so I assume their system-configuration has 150% pixel-scaling (since this favicon area is 16x16 in terms of CSS pixels, and 24 is 150% of 16.)

(In reply to Stuart Colville [:muffinresearch] from comment #11)

FWIW Upping the border-width to 1px is one way to reduce the jagged outline (if the heavier outline is acceptable).

Note that this only makes a difference for users with HiDPI levels of 200% or greater. Below 200%, 1px and 0.5px are equivalent as border-widths, based on how pixel-snapping works for borders.

So: this won't help for me or Caspy. (In your testcase in comment 11, the two circles look the same to me, and I assume they look the same for Caspy too.)

(For completeness, here's a screenshot of just the icon from Caspy7's initial screenshot, zoomed up 10x so you can see the pixels and that it is in fact antialiased.

For me at least, I think the jagged look (when viewed at the actual resolution in comment 0) comes from how the 1px-thick-border fails to draw the actual specified border-color in some spots -- there are various small slices along the border where there's no pixel that's close to the specified border-color, just due to how antialiasing works out. (The idealized border is only 1px thick, and in cases where the "ideal" location for a pixel falls ~exactly between two pixels, the brightness/color gets smeared between those two pixels. And so that point on the 1px-thick border ends up just looking like a "cutout". This ends up making the color & thickness/smoothness look kinda variable as you move your eyes around the circle.)

Here's a screenshot (using layout.css.devPixelsPerPx to make a comparison across different pixel densities, very roughly zoomed up to make the comparison easier). This highlights why the 1px border-width doesn't work under dpi2 as noted in comment 12.

The 3rd option is testing Daniel's suggested white border which seems to look better across the different pixel densities.

Assignee: nobody → dao+bmo
Status: NEW → ASSIGNED

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

Daniel, do you have advice on how to fix this? Easy reproduction is something like:

  1. open tab
  2. from the browser console, run gBrowser.selectedTab.setAttribute("soundplaying", "true") and gBrowser.selectedTab.setAttribute("indicator-replaces-favicon", ""). Then hover over the tab.

From what I can tell this is being rendered by a border-radius. I don't know why the antialiasing would be better/worse in some situations - on my display on Win11 it looks pretty reasonable... but it's possible we're simply running into bug 1724057 here, maybe?

Caspy, what Windows "Scale" and "Text size" settings are you using? And how hidpi (or otherwise) is your display?

Windows scale is at 150%. Looks like text size is 100%.

Flags: needinfo?(caspy77)
Attachment #9426745 - Attachment description: Bug 1919439 - Fix soundplaying / muted / activemedia-blocked icon border color. r=#theme → Bug 1919439 - Fix soundplaying / muted / activemedia-blocked icon border color to always be black or white. r=#theme
Pushed by dgottwald@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/826f1df6baaa Fix soundplaying / muted / activemedia-blocked icon border color to always be black or white. r=desktop-theme-reviewers,Gijs,emilio
Status: ASSIGNED → RESOLVED
Closed: 1 month ago
Resolution: --- → FIXED
Target Milestone: --- → 132 Branch
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: