1896284 - Characters in https://w3.asus.com.cn cookie banner button are not vertically centered (look slightly lower than center, vs. Chromium)

Status: UNCONFIRMED

(Core :: Layout, defect)

Description

[Tom25519]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:125.0) Gecko/20100101 Firefox/125.0

Steps to reproduce:

Open https://w3.asus.com.cn

Actual results:

In pop-up cookie banner button, characters are not horizontally centered.

Expected results:

This bug shouldn't appear.

Comment 1

[Daniel Holbert [:dholbert]]

Thanks for the bug report! Would you mind attaching a screenshot showing the issue? Looking at the bug on my Windows and Linux systems, I'm not seeing any obvious issue with horizontal centering of the characters, though I might be missing something.

Comment 2

[Tom25519]

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

Thanks for the bug report! Would you mind attaching a screenshot showing the issue? Looking at the bug on my Windows and Linux systems, I'm not seeing any obvious issue with horizontal centering of the characters, though I might be missing something.

It's really hard to differ them by screenshot, but I think you can differ by below steps:

1. Open website in Firefox and Edge
2. Make 2 browser fullscreen
3. Alt+Tab to switch the window (Maybe need a bit faster)
4. You can find that the characters in button in Firefox are a bit lower than which in Edge, Especially "C" and "同".

Comment 3

[Tom25519]

(In reply to Tom25519 from comment #2)

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

Thanks for the bug report! Would you mind attaching a screenshot showing the issue? Looking at the bug on my Windows and Linux systems, I'm not seeing any obvious issue with horizontal centering of the characters, though I might be missing something.

It's really hard to differ them by screenshot, but I think you can differ by below steps:

1. Open website in Firefox and Edge
2. Make 2 browser fullscreen
3. Alt+Tab to switch the window (Maybe need a bit faster)
4. You can find that the characters in button in Firefox are a bit lower than which in Edge, Especially "C" and "同".

It seems that only characters in button are different.

Comment 4

[Tom25519]

Additional explanation：
To easier to differ, you can press "Tab" key to highlight "Cookies設定" (Cookie Settings) botton.
More interestingly, it seems that this bug doesn't happens in "Cookie setting" page (Click "Cookies設定" to enter).

Comment 5

[Tom25519]

Attachment: Cookies設定(Cookies settings)-Firefox.png

Comment 6

[Tom25519]

Attachment: Cookies設定(Cookies settings)-Edge.png

Comment 7

[Daniel Holbert [:dholbert]]

Thanks! I do notice the difference that you screenshotted. To me it looks like the characters aren't vertically centered, slightly lower-than-center in Firefox --> adjusting bug summary to reflect that.

Comment 8

[Daniel Holbert [:dholbert]]

Attachment: screenshot showing the "C" character and button top/bottom borders in Edge (left) vs. Firefox )right)

Here's a cropped version of your screenshot, showing just the first "C" character, in Edge vs. Firefox, with the "C" characters aligned precisely side-by-side.

Things that I notice:

• The distance from the "C" to the bottom-border is the same (though the border is antialiased in Edge, so visually it looks slightly further).
• The distance from the "C" to the top border is 3px more in Firefox for some reason.
• which means the area inside the (painted) bounds of the borders is 3px taller in Firefox, for some reason.
• and this probably isn't just a pixel-rounding off-by-1px sort of issue.

Also notable is that the outline seems to be clipped on the bottom in Firefox but not in Chrome. This seems to be because the default focus-outline appears to draw inwards from the border-edge in Chrome, vs. draw outside the border in Firefox. That's just due to the way that Chrome implements outline-style:auto (which is essentially unspecified). If I change to outline-style:solid, then Chrome clips at the bottom just like we do.

Comment 9

[Daniel Holbert [:dholbert]]

Here's a data URI to assist in viewing the just-attached screenshot in a pixelated manner, to see the precise pixel alignment:

data:text/html,<body style="margin:-top:0">
<img src="https://bugzilla.mozilla.org/attachment.cgi?id=9401699"
style="image-rendering: pixelated; height: 100vh">

Comment 10

[Tom25519]

I don't know if this issue raleted with this bug:
"查看详情" (View details) button sytle in https://www.zhihu.com/market/pub/119939174/manuscript/1283909748203241472 display incorrect.

Comment 11

[Tom25519]

Attachment: 查看详情 (View details) button.png

Comment 12

[Tom25519]

This bug also happens on the "go to top" button which at the bottom right of the webpage in https://www.sony.com/zh-cn/electronics/support/articles/00026287

Comment 13

[Tom25519]

Attachment: sony.com-Firefox.png

Comment 14

[Daniel Holbert [:dholbert]]

(In reply to Tom25519 from comment #10)

I don't know if this issue raleted with this bug:
"查看详情" (View details) button sytle in https://www.zhihu.com/market/pub/119939174/manuscript/1283909748203241472 display incorrect.

I spun this off as bug 1926453.

(In reply to Tom25519 from comment #12)

This bug also happens on the "go to top" button which at the bottom right of the webpage in https://www.sony.com/zh-cn/electronics/support/articles/00026287

That Sony one might be the expected/correct rendering, I think? That "go to top" button looks exactly the same in Chrome vs. Firefox (just checked in an editor and the pixel-positioning is exactly the same).

If you're just wondering why it's not vertically-centered: I think it's just a glyph that renders in the top half of its line (sort of how ^ does -- though it's not exactly that glyph; this is an icon in a custom Sony-System-Icons font).

If you're seeing better results from other browsers on that button, though, please post a screenshot to demonstrate that difference, and/or file a new bug with more details - thanks!