Material-ui: Poor switch animation in mobile safari

[leantide]

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

After touching a Mui Switch in mobile safari (iOS 12.4), it toggles between its two states with an awkward animation that does not resemble what would be expected of a toggle switch.

Expected Behavior 🤔

Expected the Mui Switch to toggle states like it does in Chrome for desktop and Chrome for iOS 12.4.

Steps to Reproduce 🕹

Live example: https://material-ui.com/components/switches/

Steps:

1. Go to the live example in iOS Safari
2. Touch a Mui Switch
3. Observe unexpected toggle animation

Context 🔦

Trying to use a Mui Switch on iOS Safari

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.3.2 |
| React | v16.9 |
| Browser | Safari on iOS 12.4 |

[joshwooding]

I can confirm

https://imgur.com/gallery/HwRKA4h

[oliviertassinari]

@leantide The same regression was reported in #16812, the proposed fix should work too. If you want to submit a pull request, you can go ahead :).

[rbrishabh]

I am submitting a PR for this as my first contribution if that's okay :)

[oliviertassinari]

Yes, please do :)

[rbrishabh]

I actually got stuck. I am guessing from this comment that this is the hardecoded code

Mui-checked {
  left: auto;
  right: 0px;
}

that I need to add somewhere in this file

Is that correct? If not, could you please point me in the correct direction?

Thanks! =)

[oliviertassinari]

It's about reverting part of #16620. The comment you have linked is a dead end.