Form autofill doesn't work on bandcamp.com: field turns yellow, but not filled text appears
Categories
(Toolkit :: Form Autofill, defect, P3)
Tracking
()
People
(Reporter: cpeterson, Unassigned)
References
()
Details
Steps to reproduce
- Load https://bandcamp.com/
- Click "sign up" link.
- Click "Sign up as a fan" button.
- Click in "Password" field.
- Click "Use a Securely Generated Password".
Expected result
The new password should appear in the Password field. Form autofill works on this site correctly in Chrome.
Actual result
The Password field turns yellow, but no text appears in the field.
This problem is not specific to "Use a Securely Generated Password". The same problem happens with any form autofill (filling saved email addresses, passwords, or first/last names).
Reporter | ||
Updated•3 years ago
|
Comment 1•3 years ago
|
||
I'm going to go ahead and take a look at this, seeing that there are a few different issues on bandcamp.
Comment 2•3 years ago
•
|
||
Looking into this, this appears to be a site specific issue. In some of bandcamp's stylesheets, they have the following rule:
:-webkit-autofill {
color: #fff !important;
}
and we end up parsing that rule as :autofill
and apply the color change. I'm really not sure why their css has this rule, since removing it causes the text to appear as expected on Chrome and Safari. Chrome and Safari's user agent styles seem to override the :-webkit-autofill
rule.
So two possible solutions: One, we reach out to bandcamp and see if they can remove that style since it doesn't seem to have a benefit (I'm sure there's some historical reason why it's there). Two, we determine how to make our autofill styles override a site's styles for autofill.
Comment 3•3 years ago
|
||
I'll reach out to the web compatibility team and see if we have any contacts at bandcamp, or figure out the contacts myself if push comes to shove.
:emilio, do you have an opinion on making our autofill styles !important
? Other browsers make their styles important so webpages can't override them but that seems to go against what the :autofill
selector is for...
Comment 4•3 years ago
|
||
Yeah, I'd rather avoid using important if we can...
Comment 5•3 years ago
|
||
Copy that, thanks for your input! I'll go ahead and reach out to bandcamp and see if we can get this resolved.
Comment 6•3 years ago
|
||
(In reply to Tim Giles [:tgiles] from comment #5)
Copy that, thanks for your input! I'll go ahead and reach out to bandcamp and see if we can get this resolved.
Hi @tgiles, Bandcamp's support team brought the issue to the development org after you reached out to them.
The CSS rule you mentioned was the issue so we've updated our CSS accordingly and are pushing a fix.
Please let me know if that is resolved from your end.
Thank you for contacting us.
Comment 7•3 years ago
|
||
Hi @Emma, thanks for reaching out! I think from bandcamp's side of things, this is resolved.
There is a new issue now, but that's because form autofill's highlight changed from using filter
to background-color
. So the text appears now, but there is no highlight due to the background: #fff
styling on ".signup-common-form input[type="password"]" on bandcamp's end. I believe this is something that we would need to solve on our end, but I'm not 100% sure.
:emilio, seems like changing out filter
for background-color
is causing a bit of whack-a-mole. I don't think forcing the yellow highlight here is high priority, but I just wanted you to be aware of this case. I don't really have any suggestions since it looks like we're going to break the highlighting no matter which approach we taken (minus adding !important
but I don't think that's the approach we want).
Updated•3 years ago
|
Updated•3 years ago
|
Description
•