1475316 - Consider adding support for -webkit-autofill (and a default stylesheet using it) for interop with Chrome

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, enhancement, P3)

Description

[Thomas Wisniewski [:twisniewski]]

In webcompat.com issue #8125, I found that Chrome Mobile has this in its useragent stylesheets:

> input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
>    background-color: rgb(250, 255, 189) !important;
>    background-image: none !important;
>    color: rgb(0, 0, 0) !important;
> }

This is why the "Search with Google" background image on that site's search input vanishes when the user autofills in Chrome, but not in Firefox.

We might want to consider doing the same.

Comment 1

[Xidorn Quan [:xidorn] UTC+11]

If this is just used in their ua sheet, not by some website which leads to webcompat issue, we should at most add an internal pseudo-class which isn't exposed to the web.

Comment 2

[Mike Taylor [:miketaylr]]

This affects a top 25 site in Germany, but the impact is pretty minor.

Would be interesting to do a bigquery search for this pseudo, to see if any other sites are actually using this.

Comment 3

[Mike Taylor [:miketaylr]]

https://docs.google.com/spreadsheets/d/1i0vTsoeimtQ_pq_kShmyc3q6osDyFgGMB2hUEz4GlSM/edit#gid=435100039 has 16,000 sites to learn from (from the 200k or so results in BigQuery).

Comment 4

[Firefox Bug Husbandry Bot]

See bug 1547409. Moving webcompat whiteboard tags to project flags.

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Bug 1558325 had a bit of a bigger impact.

Comment 7

[Thomas Wisniewski [:twisniewski]]

A rule including -webkit-autofill is now being used on Reddit's redesign, which is causing their entire CSS rule to be ignored which animates the username/password placeholder text out of the way as the user hovers over the fields with the mouse.

Might we at least handle this specific situation more gracefully?

.AnimatedForm__textInput:-webkit-autofill+.AnimatedForm__textInputLabel,
.AnimatedForm__textInput:active+.AnimatedForm__textInputLabel,
.AnimatedForm__textInput:hover+.AnimatedForm__textInputLabel,
.AnimatedForm__textInput[data-empty=false]+.AnimatedForm__textInputLabel {
    -webkit-transform: translate3d(0,-8px,0) scale(.83333333);
    transform: translate3d(0,-8px,0) scale(.83333333);
    line-height: 14px;
}

Comment 8

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1475316 - Rename -moz-autofill to just autofill. r=#style

No compat impact, as this remains an internal pseudo-class for the time
being.

Comment 9

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1475316 - Expose :autofill behind a pref to content, and add :-webkit-autofill as a compat alias. r=#style

Nightly only until we get resolutions on the relevant spec issues.

Depends on D99295

Comment 10

[Emilio Cobos Álvarez (:emilio)]

I filed https://github.com/whatwg/html/issues/6181 on this not long ago... I just filed https://github.com/w3c/csswg-drafts/issues/5775 to get consensus on the naming on the CSSWG and sent a patch implementing this.

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a9b7489b5a3a
Rename -moz-autofill to just autofill. r=geckoview-reviewers,esawin,boris

Comment 12

[Dorel Luca [:dluca]]

Backed out changeset a9b7489b5a3a (bug 1475316) for Browser-chrome failures in browser/base/content/test/static/browser_parsable_css.js. CLOSED TREE

Log:
https://treeherder.mozilla.org/logviewer?job_id=324639267&repo=autoland&lineNumber=2500

Push that introduced failures:
https://treeherder.mozilla.org/jobs?repo=autoland&group_state=expanded&revision=a9b7489b5a3a5732676ae92a586c0690114ecc19\

Backout:
https://hg.mozilla.org/integration/autoland/rev/e15056f44cc75b923ff23246993953ef7f1b0fcb

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/96fcdecf2da5
Rename -moz-autofill to just autofill. r=geckoview-reviewers,esawin,boris
https://hg.mozilla.org/integration/autoland/rev/872e7b2b7dba
Expose :autofill behind a pref to content, and add :-webkit-autofill as a compat alias. r=nordzilla

Comment 14

[Cristina Coroiu [:ccoroiu]]

https://hg.mozilla.org/mozilla-central/rev/96fcdecf2da5
https://hg.mozilla.org/mozilla-central/rev/872e7b2b7dba