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

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Alexandru Trif, Desktop QA [:atrif]]

Attachment: 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

• Last good revision: ed3ef7c26759e4a4187c65527e789ccb0fbf773d
  First bad revision: 1e5d1f957f717b896d5ffc5dcf96b70234bce8f0
  Pushlog:
  https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=ed3ef7c26759e4a4187c65527e789ccb0fbf773d&tochange=1e5d1f957f717b896d5ffc5dcf96b70234bce8f0

Notes

• Attached a screenshot with the issue.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

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.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1718934 - Parse -webkit-focus-ring-color (computing to black). r=mstange

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?

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/66a484400799
Parse -webkit-focus-ring-color (computing to black). r=mstange,geckoview-reviewers,aklotz

Comment 4

[Narcis Beleuzu [:NarcisB]]

Backed out for mochitest failures on test_value_computation.html

Backout link: https://hg.mozilla.org/integration/autoland/rev/1f558a68ac6ed78b9c4a1b36445d6e6013a06ca4
Log link: https://treeherder.mozilla.org/logviewer?job_id=344623809&repo=autoland&lineNumber=2359

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d06a9296cfab
Parse -webkit-focus-ring-color (computing to black). r=mstange,geckoview-reviewers,aklotz

Comment 6

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/29611 for changes under testing/web-platform/tests

Comment 7

[Dorel Luca [:dluca]]

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

Comment 8

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 9

[Oana Botisan, Desktop QA]

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

Comment 10

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/29808 for changes under testing/web-platform/tests

Comment 11

[Alexandru Michis [:malexandru]]

Backed out changeset d06a9296cfab (Bug 1718934) for not fixing Bug 1718934 in its entirety.
Backout links:

• https://hg.mozilla.org/integration/autoland/rev/c0acfd9065590686ca20eda1d4d0f34bb38a88c3
• https://hg.mozilla.org/releases/mozilla-beta/rev/0c3072e6c42cf035b12808839f4e3fdbba2c7a05

Comment 12

[Emilio Cobos Álvarez (:emilio)]

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.

Comment 13

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

Backout merged: https://hg.mozilla.org/mozilla-central/rev/c0acfd906559

Comment 14

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot