Closed Bug 1718934 Opened 1 year ago Closed 1 year ago

Search field from https://www.who.int/ site has a vertical line inside

Categories

(Core :: CSS Parsing and Computation, defect)

Desktop
All
defect

Tracking

()

RESOLVED INVALID
Tracking Status
firefox-esr78 --- unaffected
firefox89 --- wontfix
firefox90 --- wontfix
firefox91 --- wontfix
firefox92 --- wontfix

People

(Reporter: atrif, Assigned: emilio)

References

(Regression, )

Details

(Keywords: regression)

Attachments

(1 file, 1 obsolete file)

Attached image who_int

Affected versions

  • 91.0a1 (20210701211644)
  • 90.0b12 (20210624190035)
  • 89.0.2 (20210622155641)

Affected platforms

  • Ubuntu 21.04
  • Windows 10x64
  • macOS 11

Steps to reproduce

  1. Open Firefox and https://www.who.int/.
  2. Click on Search from the header.

Expected result

  • Search field is displayed as expected.

Actual result

  • Search field has a vertical line inside.

Regression range

Notes

  • Attached a screenshot with the issue.
Has Regression Range: --- → yes
Has STR: --- → yes

In other browsers it works because they're suppressing the outline with:

#sf-top-header .sf-search-input-wrapper input:focus {
    border-radius: 0!important;
    border: 0!important;
    outline: -webkit-focus-ring-color auto 0;
}

And Firefox doesn't parse -webkit-focus-ring-color.

Some pages use this to hide the focus outline. On Blink it seems black,
WebKit uses it to expose the OS accent color, so this is reasonably safe
I think.

Perhaps on Windows it should be the hard-coded non-native-theme outline
color... Yet again perhaps on Windows we should also follow the OS
accent color for outlines / form controls, so this is probably fine,
wdyt?

Assignee: nobody → emilio
Status: NEW → ASSIGNED
Attachment #9229637 - Attachment description: Bug 1718934 - Parse -webkit-focus-ring-color. r=mstange → Bug 1718934 - Parse -webkit-focus-ring-color (computing to black). r=mstange
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/66a484400799
Parse -webkit-focus-ring-color (computing to black). r=mstange,geckoview-reviewers,aklotz
Flags: needinfo?(emilio)
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/d06a9296cfab
Parse -webkit-focus-ring-color (computing to black). r=mstange,geckoview-reviewers,aklotz
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/29611 for changes under testing/web-platform/tests
Status: ASSIGNED → RESOLVED
Closed: 1 year ago
Resolution: --- → FIXED
Target Milestone: --- → 91 Branch
Upstream PR merged by moz-wptsync-bot
See Also: → 1719777
Flags: qe-verify+

I can still reproduce the issue on Firefox 91.0b7 and 92.0a1 using Ubuntu 18.04 x64 and macOS 10.15.

Flags: needinfo?(emilio)
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/29808 for changes under testing/web-platform/tests
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
Target Milestone: 91 Branch → ---

Yeah, I checked and even parsing -webkit-focus-ring-color, we still paint the outline because of outline-style: auto. Safari behaves the same. https://drafts.csswg.org/css-ui/#typedef-outline-line-style says:

As such, this specification does not define how the outline-color and outline-width are incorporated or used (if at all) when rendering auto style outlines.

So we could reland my patch and align with Chrome so that outline-width: 0 hides the outline, but that seems wrong because outline-width: 10px does nothing for example.

Status: REOPENED → RESOLVED
Closed: 1 year ago1 year ago
Flags: needinfo?(emilio)
Resolution: --- → INVALID
Upstream PR merged by moz-wptsync-bot
Attachment #9229637 - Attachment is obsolete: true
You need to log in before you can comment on or make changes to this bug.