Closed Bug 1624436 Opened 5 years ago Closed 5 years ago

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

Categories

(Core :: Layout: Form Controls, defect)

74 Branch
Desktop
Linux
defect
Not set
normal

Tracking

()

VERIFIED FIXED
mozilla76
Tracking Status
firefox-esr68 --- unaffected
firefox74 --- wontfix
firefox75 --- verified
firefox76 --- verified

People

(Reporter: macmaN, Assigned: emilio)

References

(Regression)

Details

(Keywords: regression)

Attachments

(2 files)

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?

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...

Flags: needinfo?(leho)
Regressed by: 1031664
Has Regression Range: --- → yes

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?

Flags: needinfo?(leho)

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.

Flags: needinfo?(emilio)

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.

Assignee: nobody → emilio
Status: NEW → ASSIGNED
Flags: needinfo?(emilio)

btw. the implementation was introduced by Bug 1073117

Pushed by ealvarez@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/ee0d41c18c40 Don't include GTK widget padding in outline: auto size. r=karlt,stransky
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla76

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

Flags: needinfo?(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
Flags: needinfo?(emilio)
Attachment #9135670 - Flags: approval-mozilla-beta?

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

approved for 75 rc1

Attachment #9135670 - Flags: approval-mozilla-beta? → approval-mozilla-release+
Flags: qe-verify+
QA Whiteboard: [qa-triaged]

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.

Status: RESOLVED → VERIFIED
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: