Sliders not functioning correctly on iphone 13 mini.

[dcallus]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

When I use any kind of slider on the iphone 13 mini (iOS 15.4.1) the sliders do not work properly.

80% of the time when you drag a slider it works. But about 20% of the time the slider jumps back to where you slid it from, potentially 2-5 increments closer to where you were trying to drag to. This can be quite frustrating when trying to make precise adjustments and it keeps jumping back.

It does not seem to be affected by how quickly I drag or finger placement etc.

Expected behavior 🤔

Sliders to function as normal, like on other devices.

Steps to reproduce 🕹

Steps:

1. Use the iPhone 13 mini
2. Drag any slider multiple times
3. Sometimes it won't register the drag properly.

Context 🔦

The context is that I'm trying to drag the slider to input a specific value.

Your environment 🌎

This applies to all environments. I've loaded the mui slider documentation on my iphone and had the same results. This bug affects both safari and chrome.

[dcallus]

For extra confirmation (that it's not an issue with my phone's touch sensors) I've just tested another javascript slider (on w3schools website) and this works as expected.

[siriwatknp]

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest) with a minimal code example that reproduces the problem.

[dcallus]

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest) with a minimal code example that reproduces the problem.

Here it is: https://codesandbox.io/s/solitary-browser-4zbq4s?file=/src/App.js

It's literally just adding a <Slider /> with nothing else. That's all it takes.

And here is a repo too https://github.com/dcallus/minimal_mui_slider

This is on the iphone 13 mini. I'm not sure if other iphones have the same issue.

Here is a video. Sometimes it's much worse than this you can barely even change the value it constantly jumps back, but you get the idea. It doesn't do this on Android.

It may look like it, but my thumb is definitely not touching the screen after release, so it's not an accidental touch.

https://user-images.githubusercontent.com/80394290/171404542-3c7f8046-f318-4f5a-86e0-b3e217fb5bef.mp4

[im-amir]

Is there any update on this? Facing the same issue in all iPhone devices.

[spasea]

iPhone 12 PRO has the same issue with the slider. However the same slider works correctly on desktop. And it works correctly on iPhone if you touch the thumb, drag it to the desired value and then hold the thumb for about 2 sec. After releasing the thumb it stays at the expected position

UPD: I've got a random exception with the slider regarding Can't read propety 'getBoundingClientRect' of undefined and my appox guess that this might be a source of an issue with iPhone behavior

[melissarh57]

same here with iphone 11 in safari. Any update on when expected fix?

[Sweater-Baron]

I'm having this issue as well. We are on version 5.10.4

[Sweater-Baron]

I found some more info on this bug and a workaround in https://github.com/mui/material-ui/issues/31869

The problem exists because mobile Safari fires mousedown as a way to emulate mouse events. The createHandleMouseDown function registers the handleTouchEnd as an event handler for the second time (first for touchend, and now mouseup). We could try using pointer events instead of mouse and touch events and make sure they are registered just once. Would anyone here be interested in giving it a try?

The workaround suggested in ConnorsApps' comment will break click functionality for normal mouse users, so I added detection of iOS to the below code, and only discard the click event if a device is iOS. (iOS detection code from https://stackoverflow.com/questions/9038625/detect-if-device-is-ios/9039885#9039885 )

function iOS() {
  return [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ].includes(navigator.platform)
  // iPad on iOS 13 detection
  || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
}

const isIOS = iOS();

const handleChange = (event, newValue) => {
        if (isIOS && event.type === 'mousedown') {
            return;
        }
  // Otherwise handle your change event as normal
}

[jeradrose]

@Sweater-Baron's solution seems to work mostly for me, but will still leave the tooltip value active sometimes (e.g. when valueLabelDisplay="auto").

[matte5031]

Same issue here on iphone 14 pro. The above solution did no work for me.

[evgeniygilenok]

Thank you @Sweater-Baron, your workaround is working for me.

[MantasGulbinskas]

it's the same inconsistencies in the functionality where the value sometimes reverts to its previous state or fluctuates unpredictably. The above solution did no work for me.

https://github.com/mui/material-ui/assets/97044774/d256c50c-99d6-41de-9d14-8005592bc468

[siriwatknp]

This looks like a long-standing issue. I don't think I will be able to do the fix in v6, so I appreciate anyone's help on this.

[lewincary]

For anyone who @Sweater-Baron's solution didn't work for, try handling the onChange and onChangeCommitted functions differently. From what I can tell there are different events being fired for onChange (mousedown) and onChangeCommitted (mouseup). For each, you will want to ignore in similar fashion to @Sweater-Baron's solution:

      onChange={(event, newValue) => {
        // onChange we want to block duplicate mouse down release events
        if (isIOS && event.type === "mousedown") {
          return;
        } else {
          setSliderValue(newValue);
        }
      }}
      onChangeCommitted={(event, newValue) => {
        // onChangeCommitted we want to block duplicate mouse up release events
        if (isIOS && event.type === "mouseup") {
          return;
        }
        onChange(event, newValue)
      }}