1753640 - [CA][bestbuy.ca] None of the address form fields are highlighted with the autofill specific yellow highlight color

Status: RESOLVED WONTFIX

(Toolkit :: Form Autofill, defect)

Description

[Alin Ilea, Desktop QA]

Attachment: 2022-02-03_13h32_03.mp4

Affected Versions:

Nightly 98.a1, Beta 97 and Release 96

Tested on:

MacOS 11
Windows 10

Preconditions:

browser.search.region CA
extensions.formautofill.addresses.enabled - true
extensions.formautofill.supportedCountries US,CA
download latest Firefox Nightly with region locale
have a complete address already saved in about:preferences#privacy

Steps to reproduce:

1. Reach the address form on bestbyt.ca
2. Using the autofill feature, hover over any saved address entry to check the autofill preview
3. Using the autofill feature, select any saved address entry.

Expected Results:

All the fields should be successfully highlighted with the specific yellow color on preview and autofill.

Actual Results:

None of the address form fields are highlighted with the autofill specific yellow highlight color for either preview or autofill.

Notes:

Reproducible on Chrome: Yes, only the Province field is highlighted on Chrome.

Comment 1

[Tim Giles [:tgiles]]

Attachment: image.png

Normally the website will override background or background-image which is why our autofill styles disappear, but best buy is using the -webkit-box-shadow which makes the background-image not appear but doesn't overwrite the background-image rule in the inspector. Using the background-color/background rules in combination with box-shadow/-webkit-box-shadow seems to work as expected outside of the input:autofill selector so I'm not sure why there's a clash here. Oh, figured out why.

So best buy is using a box shadow with the following parameters: 0 0 0 0px #fff inset. These 30px of white inset are a higher z-index than the background-image causing the yellow highlight to disappear when it's really hidden behind the box-shadow insert.

:emilio, I don't think this is urgent but is there any way to prevent an inset box-shadow from hiding our autofill background-image? I'm guessing we could set like a z-index or something on the input:autofill, select:autofill selectors but I don't think that's necessarily the right way to go.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

We could do this in the painting code. Changing the z-index is not an option, the shadow is inside the input. But it might be problematic since that would disable otherwise-benign shadows as well.

Comment 3

[Sergey Galich [:serg]]

This is specific web site desire to interfere with autofill styling. We won't be fixing this one.