1672471 - Hovering tabs in about:certificate can cause the most of the text on the page to jump

Status: VERIFIED FIXED

(Firefox :: Security, defect, P3)

Description

[Itiel]

STR:

1. Open the certificate page for https://english.president.gov.tw/
2. Hover the second tab ("政府伺服器數位憑證管理中心 - G1")
3. See the text on the page jumps up and down while you hover in and out

Comment 1

[Itiel]

Attachment: Screencast

Comment 2

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

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

Comment 3

[Johann Hofmann [:johannh]]

Hmm I can't reproduce. Could be a layout issue? Let's keep it in this component for now...

Comment 4

[Itiel]

(In reply to Johann Hofmann [:johannh] from comment #3)

Hmm I can't reproduce. Could be a layout issue? Let's keep it in this component for now...

Sigh. Of course it had to be a DPI-related issue...
This is fixed for me if I bump the border and padding to 4px and 16px respectively. I've verified this works across 125%, 150% and 175% (and of course 100%).

johannh, is this an acceptable solution?

Comment 5

[Johann Hofmann [:johannh]]

Hmm that's probably fine as a workaround in this instance, yeah, though I do wonder if we should file another bug with Layout, since this page shouldn't get rendered differently than web content so there may be a larger-scale bug here?

Comment 6

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1672471 - Don't change tab border widths on hover in the certificate section. r=johannh,itiel

See https://crisal.io/words/2020/06/13/rounding-borders.html for why
border and padding snap differently, and the trade-offs we make.

This should also be faster (should avoid needing a re-layout).

Comment 7

[Emilio Cobos Álvarez [:emilio]]

(In reply to Johann Hofmann [:johannh] from comment #5)

Hmm that's probably fine as a workaround in this instance, yeah, though I do wonder if we should file another bug with Layout, since this page shouldn't get rendered differently than web content so there may be a larger-scale bug here?

Working as intended I'd say.

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/43e0f933ad51
Don't change tab border widths on hover in the certificate section. r=johannh

Comment 9

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/43e0f933ad51

Comment 10

[Oana Botisan, Desktop QA]

I managed to reproduce the issue using an older version of Nightly (2020-10-21) on Windows 10 x64.
I retested everything using latest Nightly 85.0a1 and Firefox 84.0b3 on Windows 10 x64, Ubuntu 16.04 x64 and macOS 11.0.1. The issue is not reproducing anymore.