1834939 - Favicon/notification dot look off-center for pinned tabs, on 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.