1760313 - background of pseudo element is hover the element background for select > option

Status: RESOLVED WONTFIX

(Core :: Graphics: WebRender, defect)

Description

[p.moirez]

Attachment: firefox_bug.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Safari/537.36

Steps to reproduce:

https://jsfiddle.net/518zbe3t/

I used pseudo element to show red dot if the string is below 10 characters.

In previous versions of firefox and in chrome, everything worked well.

Actual results:

All the string is red

Expected results:

AOly the dots are red (see file attached)

Comment 1

[p.moirez]

*Only the dots are red (see file attached)

Comment 2

[p.moirez]

The bug is only present with a select > option. Not with a div.

Comment 3

[Alice0775 White]

Regression window:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=1749516f8484c78e6d4b0ab03800aeb343107094&tochange=4a51ad7f61fb1d12cf0af69c6410db28cb577f63

Comment 4

[BugBot [:suhaib / :marco/ :calixte]]

:emilio, since you are the author of the regressor, bug 1741776, could you take a look?
For more information, please visit auto_nag documentation.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Attachment: Alternative / simpler approach to achieve the desired effect.

I see. So that test-case is relying on the ::before pseudo-element getting z-sorted inside the select box, which no longer happens as a result of my patch.

It's a kind of expected behavior change, though when I wrote it I didn't realize Chromium would allow you to make the pseudo-elements of an option abspos (they don't allow you to do that with other elements that you might want to append to the <option>, so might be unintended on their side, tbh).

In any case, the approach you chose to achieve the effect is a bit complicated IMO, and could be replaced with something like this which doesn't rely on z-sorting around.

Comment 6

[p.moirez]

Hi Emilio,
Thank you for the solution, it works perfectly!
Should i close the bug?
Thanks.

Comment 7

[Emilio Cobos Álvarez (:emilio)]

Yeah, let's close for now. If other stuff is broken due to my change we'll have to re-consider, but this specific case seems worth addressing in a separate way. Note that you might want to use overflow: hidden; instead of overflow: clip for older browsers, other than that my solution should work ~everywhere.

Comment 8

[p.moirez]

Ok, I close it.
Many thanks for your help.