1919439 - sound-playing icon looks bad (outline is aliased)

Status: RESOLVED FIXED

(Firefox :: Theme, defect, P1)

Description

[Caspy7]

Attachment: img-2024-09-18-01-51-47.png

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.

Comment 1

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

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

Comment 2

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

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.

Comment 3

[Sarah Clements [:sclements]]

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

Comment 4

[:Gijs (he/him)]

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?

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: 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.

Comment 6

[Daniel Holbert [: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.

Comment 7

[Daniel Holbert [:dholbert]]

Attachment: screenshot of just-the-icon from dholbert's linux screenshot, scaled up 10x

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).

Comment 8

[Daniel Holbert [:dholbert]]

Attachment: [first version of reduced testcase; reattached to clean up slightly]

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

Comment 9

[Daniel Holbert [:dholbert]]

Attachment: reduced testcase

Comment 10

[Daniel Holbert [:dholbert]]

(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.

Comment 11

[Stuart Colville [:muffinresearch]]

Attachment: Test case with 2 versions, 2nd with border width upped to 1px

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.

Comment 12

[Daniel Holbert [:dholbert]]

(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.)

Comment 13

[Daniel Holbert [:dholbert]]

Attachment: screenshot of just-the-icon from Caspy7's screenshot, scaled up 10x

(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.)

Comment 14

[Stuart Colville [:muffinresearch]]

Attachment: Screenshot 2024-09-24 at 10.43.43.png

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.

Comment 15

[Dão Gottwald [:dao]]

Attachment: Bug 1919439 - Fix soundplaying / muted / activemedia-blocked icon border color to always be black or white. r=#theme

Comment 16

[Caspy7]

(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%.

Comment 17

[Pulsebot]

Pushed by [e-mail]:
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

Comment 18

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/826f1df6baaa