Closed Bug 1475316 Opened 6 years ago Closed 3 years ago

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

Categories

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

enhancement

Tracking

()

RESOLVED FIXED
86 Branch
Webcompat Priority revisit
Tracking Status
firefox63 --- wontfix
firefox86 --- fixed

People

(Reporter: twisniewski, Assigned: emilio)

References

Details

(Keywords: dev-doc-complete)

Attachments

(2 files)

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.
Flags: webcompat?
Component: DOM: CSS Object Model → CSS Parsing and Computation
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.
Priority: -- → P3

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.

Flags: needinfo?(miket)

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

Flags: needinfo?(miket)
Whiteboard: [webcompat] → [webcompat-revisit]

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

Webcompat Priority: --- → ?
Webcompat Priority: ? → revisit
Whiteboard: [webcompat-revisit]
Flags: webcompat?

Bug 1558325 had a bit of a bigger impact.

Summary: Consider adding support for -webkit-autofill (and a default stylesheet using it) for interop with Chrome mobile. → Consider adding support for -webkit-autofill (and a default stylesheet using it) for interop with Chrome

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;
}
Flags: needinfo?(emilio)

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

Assignee: nobody → emilio
Status: NEW → ASSIGNED

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

Depends on D99295

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.

Flags: needinfo?(emilio)
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/a9b7489b5a3a
Rename -moz-autofill to just autofill. r=geckoview-reviewers,esawin,boris
Flags: needinfo?(emilio)
Flags: needinfo?(emilio)
Pushed by ealvarez@mozilla.com:
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
Status: ASSIGNED → RESOLVED
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → 86 Branch
Blocks: 1685675
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: