1843040 - Incorrect positioning of <input type=range> slider on SoundCloud embed widget

Status: VERIFIED FIXED

(Core :: CSS Parsing and Computation, defect)

Description

[Paul Adenot (:padenot)]

Attachment: incorrect positionning

STR:

• Open https://www.nts.live/shows/martha/episodes/martha-7th-july-2023
• Click the Play button

Expected:

• A widget appears at the bottom, the slider is positioned correctly at the center of the gutter

Actual:

• A widget appears at the bottom, the slider is not centered

Comment 1

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

Set release status flags based on info from the regressing bug 1735575

Comment 2

[Thomas Wisniewski [:twisniewski]]

It looks like they're using ::-moz-range-thumb/::-moz-range-track as well as ::-webkit-slider-runnable-track/::-webkit-slider-thumb. If I drop the moz-prefixed CSS it seems to work. Emilio, could we easily ignore one set of prefixes if we see both?

Comment 3

[Emilio Cobos Álvarez (:emilio)]

It doesn't for me? What's causing the shift is the transform: translateY(-4px) from the ::-webkit-slider-thumb rule.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1843040 - Disable layout.css.webkit-range-pseudos.enabled. r=twisniewski,denschub

The layout of our slider is incompatible with Chrome's, as suspected in
bug 1735575 comment 9.

So this needs more re-think, maybe reworking the pseudo-element
structure when it's enabled. A potential path forward:

• Make these pseudo-elements proper pseudos (not just aliases).
• When this pref is enabled we don't even query the ::-moz- pseudos,
  and read only ::-webkit-'s.
• But we also don't generate the same tree structure, we generate
  something more like WebKit's tree (thumb inside track inside
  container), with this css1.

That would be somewhat sad because the whole situation of these pseudos
kinda sucks, see https://github.com/w3c/csswg-drafts/issues/4410.

Comment 5

[Thomas Wisniewski [:twisniewski]]

Yeah, your assessment makes more sense, Emilio .

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/bb73759d9a27
Disable layout.css.webkit-range-pseudos.enabled. r=denschub

Comment 7

[Sandor Molnar[:smolnar]]

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

Comment 8

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

Reproducible on a 2023-07-12 Nightly build on macOS 12.
Verified as fixed on Firefox 117.0b5(build ID: 20230808215502) and Nightly 118.0a1(build ID: 20230809092330) on macOS 12, Windows 10, Ubuntu 22.