1624436 - Firefox 74.0: input[type="radio"] receives a glitchy focus ring on mouse click

Status: VERIFIED FIXED

(Core :: Layout: Form Controls, defect)

Description

[Leho Kraav (:macmaN @lkraav)]

Attachment: Screenshot from 2020-03-23 22-19-58.png

This (regression?) seems to have appeared fresh in Firefox 74.

See screenshot - notice glitchy focus ring around "Billing: Annual" radio input.

1. it appears on mouse click - I have been under the impression focus rings should only appear on keyboard navigation?

2. It's not the CSS - inspect live at https://cxl.com/institute/pricing/

3. Glitchiness is also indicated by focus ring render changing if we modify the active CSS cascaded property: outline: 1px auto #129fea. Specifically, something is going wrong with auto outline value - if you toggle it between some other value, rendering changes to a different glitch (side borders go missing). Alternative stylesheet property outline: thin solid #129fea is rendered correctly (square box around input), although see list item no 1 - it should not be showing up on mouse click?

Comment 1

[Emilio Cobos Álvarez (:emilio)]

So this is a regression from bug 1031664.

The page has:

input[type=checkbox]:focus {
    outline: 1px auto #129fea;
}

And the auto-style outline has quite a bit of padding on Linux.

Just double-checking: You're on Linux, right? I suspect the rendering looks different on Mac / Windows. Maybe we should forcibly remove the padding from the outlines on GTK...

Comment 2

[Leho Kraav (:macmaN @lkraav)]

I am on Linux, Gnome 3.34 - "Platform" field is correctly set on this bug.

Thanks for the identifying the regression source, wasn't aware of how deep the rabbit hole goes.

I'm not entirely sure now what the move here is - we're not married to outline-style: auto in our CSS at all, could just remove it - but wondering if this bug can also manifest in some other manner, and we'll be playing whack-a-mole on Firefox?

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Yeah, I'm on Linux too. I don't know off-hand the best solution for this yet, I'll think a bit about it.

If other platforms don't have padding in the outline we probably can just remove it / add a cap to it... I need to dig more into our gtk outline: auto painting to figure out what the right solution for this is. Chances are the padding is a bit excessive, I'm surprised about the padding in the X axis being so huge compared to the Y axis.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1624436 - Don't include GTK widget padding in outline: auto size. r=karlt,stransky

To paint outline: auto, we paint the focused border of a GTK_ENTRY_PAINT.

We're also adding the padding of the entry, and that's wrong and causes
undesirable padding that looks bogus.

Comment 5

[Martin Stránský [:stransky] (ni? me)]

btw. the implementation was introduced by Bug 1073117

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ee0d41c18c40
Don't include GTK widget padding in outline: auto size. r=karlt,stransky

Comment 7

[Alexandru Michis [:malexandru]]

https://hg.mozilla.org/mozilla-central/rev/ee0d41c18c40

Comment 8

[Julien Cristau [:jcristau]]

Is this worth fixing in 75rc or better leave it for 76?

Comment 9

[Emilio Cobos Álvarez (:emilio)]

Comment on attachment 9135670 [details]
Bug 1624436 - Don't include GTK widget padding in outline: auto size. r=karlt,stransky

Beta/Release Uplift Approval Request

• User impact if declined: outline: auto has extra padding
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: No
• If yes, steps to reproduce:
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Trivially removes some padding from the outline
• String changes made/needed: none

Comment 10

[Julien Cristau [:jcristau]]

Comment on attachment 9135670 [details]
Bug 1624436 - Don't include GTK widget padding in outline: auto size. r=karlt,stransky

approved for 75 rc1

Comment 11

[Julien Cristau [:jcristau]]

https://hg.mozilla.org/releases/mozilla-release/rev/23d9f2db83a9

Comment 12

[Emil Ghitta, QA [:emilghitta]]

I have managed to reproduce this issue using Firefox 76.0a1 (BuildId:20200323092419) on Ubuntu 18.04 64bit.

This issue is verified fixed using Firefox 76.0a1 (BuildId:20200331225823) and Firefox 75.0 (BuildId:20200331175109) on Ubuntu 18.04 64bit.