1735575 - Investigate adding aliases for ::-webkit-slider-*

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, enhancement)

Description

[Dennis Schubert [:denschub]]

In a recent WebCompat issue, I stumbled across a minor visual glitch caused by a site styling an <input type="range"> with ::-webkit-slider-runnable-track and ::webkit-slider-thumb, but not it's -moz-prefixed counterparts ::-moz-range-track and ::-moz-range-thumb.

I did not look into details, but it appears like the stylings could be fairly compatible to each other. That being said, this is lower on the priority-scale, as I don't recall frequent issues with this.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

Do they really map one to one? We also have ::-moz-range-progress.

See also https://github.com/w3c/csswg-drafts/issues/4410

Comment 2

[Emilio Cobos Álvarez (:emilio)]

I guess they do map 1:1, it's just that -progress allows further customization

Comment 3

[Dennis Schubert [:denschub]]

Some pseudo-elements do map, but others do not. I think saying that only aliasing some but not others will cause even more weirdness is fair, and given there is potential for an eventual spec resolution, this can also be a WONTFIX for now.

In cases where things are broken, we can also craft interventions that would probably address most of the issues, so we don't have a hard-dependency on engine support here.

I didn't find an existing issue for that, so I figured it's worth filing a new one. I marked this as webcompat-priority P3 because I'm not aware of any significant breakage caused by range input styling. Even if this gets closed as WONTFIX, we can always come back if we discover something critically broken.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1735575 - Add aliases for webkit-slider pseudos. r=#style

Comment 5

[Emilio Cobos Álvarez (:emilio)]

It'd be interesting if you can give the patch a shot and see if it fixes the compat bug you were seeing out of curiosity :)

Comment 6

[Dennis Schubert [:denschub]]

Sorry, took me a bit longer to get back to this.

Your patch fixes the compat issue on powerapps.com, it just looks like Chrome with this. I have not tested any other site, but I'm happy to run some tests internally if you'd be interested in that!

Comment 7

[Thomas Wisniewski [:twisniewski]]

There is a shopping site with an interesting "dual slider" for its price-range filter. It is broken because it disables pointer events on two overlaid sliders, and then enables pointer events on just their thumbs (https://github.com/webcompat/web-bugs/issues/123642). But since it only does the latter with ::-webkit-slider-thumb and doesn't also have ::-moz-range-thumb, the dual-slider ends up being completely non-interactable in Firefox. So not having aliases for at least the thumb is indeed causing webcompat site breakage, not just visual inconsistencies.

Comment 8

[Dennis Schubert [:denschub]]

We now have a second site affected by this (see comment 7), and this time it's breaking functionality. I've rebased the attached WIP-patch onto the current central, and was able to confirm that the patch still works and fixes the new issues as well.

Emilio, do you think it's feasible to ship the work-in-progress patch here, or would that require lots of work?

Comment 9

[Emilio Cobos Álvarez (:emilio)]

The patch works, but the question remains whether it breaks more stuff than it fixes, due to the pseudo tree being different.

Comment 10

[Emilio Cobos Álvarez (:emilio)]

We could maybe enable it on nightly for a while? If that seems fine I'm happy to write the patch.

Comment 11

[Dennis Schubert [:denschub]]

Seems like a good approach. We'll keep an eye out for any breakage!

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b9f650869218
Add aliases for webkit-slider pseudos. r=boris

Comment 13

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/b9f650869218

Comment 14

[Sebastian Zartner [:sebo]]

While it's a non-standard feature, those two pseudo-elements should still be added to the browser compat data, as ::-moz-range-thumb and ::-moz-range-track are. Note that they were put being the pref layout.css.webkit-range-pseudos.enabled for now.

Sebastian

Comment 15

[Brian Thomas Smith [bsmth]]

MDN docs changes can be tracked in the following GitHub issue: https://github.com/mdn/content/issues/28288