IE11: switch thumb disappears

[dj1703]

The thumbs of switches disappear on the IE11 if the switch is checked. It seems to be moved outside of the track (see screenshot). If the switch is unchecked the thumb appears again and looks fine.

Expected Behavior 🤔

Thumb doesn't disappear if switch is checked.

Current Behavior 😯

Thumb disappears if a switch is checked. It appears again if the switch is not checked anymore.

Steps to Reproduce 🕹

Reproducible with the switches on the demo page: https://material-ui.com/components/switches

1. Checked switches have no thumb.
2. Unchecked switches show the thumb.

Your Environment 🌎

Tech	Version
Material-UI	4.3.0
React	16.8.6
IE	11.615.17763.0
TypeScript	3.4.5

[oliviertassinari]

This is a regression of #16620. setting display: block fixes the static output but doesn't solve the animation jump.

@darkowic What do you think of going back to the hardcoded transition value as long as we support IE 11: #14420?

[darkowic]

Oh no IE...

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

It works (the position is correct) but I do not know if it is possible to animate it (Any CSS master here? 😂 ).

I see also that the label from IconButton is gone - not displayed at all. But when I change display to inline-block it is back (still placed incorrectly).

But maybe rolling back the hardcoded translate will be fine... I do not like it but I broke it so let's keep the old solution...

[oliviertassinari]

OK great, thanks for checking. Let's use the hardcoded translate :).

[boukensj]

I solved it by giving the switch style a width of 90

[oliviertassinari]

@boukensj How does it look like?

[boukensj]

[oliviertassinari]

@boukensj Thanks for sharing. I think that the hardcoded transition value is still our best option: #16812 (comment).

[oliviertassinari]

The same problem was reported on Safari, we need to revert the transfrom 100%: #17029.