[slider] iOS: cannot drag handle to change value

[sorvell]

What is affected?

Component

Description

On iOS, dragging the slider handle does not move the handle or change the value.

Reproduction

1. On iOS, go to https://material-web.dev/components/slider/ and expand the interactive demo.
2. On one of the sliders, drag the thumb to change the value.

Expected: the thumb moves and the value changes.
Actual: the thumb does not move and the value does not change.

Workaround

N/A

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

1.0

Browser/OS/Node environment

Browser: Safari
OS: iOS 17

[sorvell]

Here is a fix: https://lit.dev/playground/#gist=8c6324fb869859c7198cb588d05da151

The problem is the transform: scaleX(0) on ::-webkit-slider-thumb. I believe this was done to make it easier to tap near the handle to set a value. The handle is 20px wide and the touch target is 40px wide.

I suggest just removing the scale or maybe making it 0.5 so it's the same size as the handle, but that may make it harder to drag.

[e111077]

I would like to note that the blame on that line has your name all over it >:D