Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Poor switch animation in mobile safari #17029

Closed
2 tasks done
ghost opened this issue Aug 17, 2019 · 6 comments · Fixed by #17095
Closed
2 tasks done

Poor switch animation in mobile safari #17029

ghost opened this issue Aug 17, 2019 · 6 comments · Fixed by #17095
Labels
bug 🐛 Something doesn't work component: switch This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process. priority: important This change can make a difference

Comments

@ghost
Copy link

ghost commented Aug 17, 2019

  • The issue is present in the latest release.
  • 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
Copy link
Member

I can confirm

https://imgur.com/gallery/HwRKA4h

@oliviertassinari oliviertassinari added the bug 🐛 Something doesn't work label Aug 17, 2019
@oliviertassinari
Copy link
Member

oliviertassinari commented Aug 17, 2019

@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 :).

@oliviertassinari oliviertassinari added component: switch This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process. labels Aug 17, 2019
@rbrishabh
Copy link
Contributor

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

@oliviertassinari
Copy link
Member

Yes, please do :)

@oliviertassinari oliviertassinari added the priority: important This change can make a difference label Aug 20, 2019
@rbrishabh
Copy link
Contributor

rbrishabh commented Aug 21, 2019

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
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: switch This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process. priority: important This change can make a difference
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants