1834939 - Favicon/notification dot look off-center for pinned tabs, especially on a device with 125% scaling

Status: NEW

(Core :: Layout, defect)

Description

[Daniel Holbert [:dholbert]]

Attachment: screenshot of Firefox window (look closely at the dot below the "i" favicon in the pinned tab)

STR:

1. Start Firefox with a fresh profile.
2. Visit https://localhost:8765 , to intentionally get a broken page.
3. Pin that tab.
4. Restart Firefox.
5. When Firefox comes back up, look at the notification dot on your pinned tab.

ACTUAL RESULTS:
The notification dot is slightly offset to the right of the broken-site-favicon's i center-line) This results in the favicon and/or the dot looking offset/misaligned.

EXPECTED RESULTS:
Consistent centering between the favicon and the dot.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot of hovered pinned tab, scaled 10x

If you hover the pinned tab, the bounds of the tab show up which helps to visualize things a bit.

Here's a screenshot of what that looks like for the tab in question, scaled up 10x.

Looking closely in an image editor, it looks like the notification dot is actually perfectly centered, and it's the "i" favicon that's misaligned.

In particular: at the true resolution (before I scaled this image by 10x)...

• The tab button (the area that darkens on hover) is 45px wide.
• The notification dot appears to be 5px wide, and it's positioned with 20px to its left and 20px to its right.
• So, it's perfectly centered.
• On the other hand: the central darkest pixel-column for the "i" in the favicon is positioned with 21px to its left and 23px to its right. And the circle around the "i" has 12px to its left vs. 14px to its right.

So really the favicon is being drawn 1px to the left of where it should be, I think?

Comment 2

[Daniel Holbert [:dholbert]]

Aha, two clues:
(1) Firefox and Chrome are both telling me I have window.devicePixelRatio=1.25 so I apparently have that scale factor introducing some interestingness here. (Ubuntu system settings claims it's got a 100% pixel scale applied, but I'm skeptical given what Firefox/Chrome are saying. This is on a laptop that I haven't booted up in a while, so I don't have a lot of confidence/recollection about its exact display configuration.) So this explains why Firefox's devtools is reporting the tab darkened-on-hover-area as being 36 css pixels wide, while my screenshot is capturing it as 45px wide.

(2) It looks like we give the favicon a 16px by 16px area to layout into (in CSS pixels -- so that's 20px by 20px dev pixels, given my 1.25 scaling). It's not too surprising that this even-width favicon looks slightly off-center in an odd-width area; but it is a little surprising that it ends up looking a full pixel off-center instead of a fraction of a pixel (per comment 1, 12px on the left vs. 14px on the right). Maybe this is a pixel-snapping artifact?

This may really be a layout or imagelib bug; it doesn't look like the frontend code is doing anything obviously wrong here, from poking in browser toolbox. --> Reclassifying to layout for now.

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: screenshot of Firefox View "open tabs" UI with off-center notification dot

This is still an issue in Nightly 138.0a1 (2025-03-05) FWIW. (I was about to file a bug and then discovered I'd previously filed this one. :))

This shows up in Firefox View as well - here's a screenshot showing that.

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Here's a reduced testcase based on what I see in Firefox View on the device where I noticed this (where I have 125% pixel scaling). The markup here is based on actual styles in Firefox View. (I just changed expanded the info-icon to a data URI, and reduced the vertical offset for the dot a bit, to make the horizontal misalignment more obvious.)

This looks the same for me (slightly off center) in Firefox and Chrome, so I suspect that indicates that there's no gecko-layout bug here, and rather we should change the styling of the favicon/dot a bit to avoid this misalignment.

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: screenshot of testcase in Firefox (top) and Chrome (bottom)

Comment 6

[Daniel Holbert [:dholbert]]

Attachment: screenshot on a system with 100% pixel scaling, showing the misaligned with hovered-pinned-tab (top left) and Firefox view (bottom right)

This reproduces on a device with 100% pixel-scaling too (devicePixelRatio = 1, the traditional setup), though it's more subtle. Here's a screenshot to demonstrate. The misalignment is most noticeable near the bottom right in Firefox View.

Zooming in my image editor, it looks visually like the "(i)" image is drawn at 15px wide (with very faint antialiased fringe extending onto a 16th pixel), whereas the green notification dot is perfectly centered as if the info-dot were actually 16px wide.

Looking in devtools, it appears the "(i)" image is actually being drawn as a 16x16 image - so the issue is with that image itself -- it's 16x16, but its internal <path> doesn't seem to be centered; it doesn't really use the rightmost column of pixels.

Comment 7

[Daniel Holbert [:dholbert]]

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

Looking in devtools, it appears the "(i)" image is actually being drawn as a 16x16 image - so the issue is with that image itself -- it's 16x16, but its internal <path> doesn't seem to be centered; it doesn't really use the rightmost column of pixels.

I filed bug 1953642 on this^. I'm pretty sure it's the entirety of the problem here.