Slider's label is not Horizontally Centred to Thumb in Internet Explorer 11

[sparlos]

• 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 😯

valueLabel that is attached to MuiSlider does not centre to the slider's thumb in IE 11. Issue does not appear in any other browser.

Expected Behavior 🤔

Slider's value label should have consistent positioning across browsers.

Steps to Reproduce 🕹

https://codesandbox.io/s/empty-paper-w2t7x?file=/src/Demo.js

Open in IE 11 and see that label positioning is off. This is also visible on latest version of the docs in IE 11 (see screenshot below).

Context 🔦

I'm attempting to implement an always-on slider label and this is visually inconsistent across browsers (all but IE 11 look fine). I tried downgrading to a bunch of previous versions of MUI (4.9.10, 4.9.8) and the bug was still there. Looking at the v3 docs on IE 11, the issue is not there. Also upgraded to latest version of Material-UI (4.9.12) to no avail.

Your Environment 🌎

I was able to reproduce this on Mac OS using a Windows 10 VM and a laptop running Windows 8.1.

Tech	Version
Material-UI	v4.9.11
React	16.8.1
Browser	IE 11 .0.9600.19650

[sparlos]

I found a workaround by putting this into my custom theme:

MuiSlider: {
      valueLabel: {
        left: 'calc(-50% - 4px)'
      }
}

I noticed that the custom implementations of the sliders on the Slider demo page were not broken in IE, and they used the left property for styling. I don't know if that provides any insight into what the issue is, but I figured I'd say it anyways!

[joshwooding]

Ah the fun we all experience with IE11 😭

[marcosvega91]

Justify content Is not working well

[oliviertassinari]

I noticed that the custom implementations of the sliders on the Slider demo page were not broken in IE, and they used the left property for styling. I don't know if that provides any insight into what the issue is, but I figured I'd say it anyways!

Oh wow, this sounds like pure luck. These styles shouldn't be here in the first place. They probably originate from a previous iteration, until I figured a way to center the label with the display styles, quite handy to avoid changing the position of the label when customizing the size of the thumb.

@sparlos What about something in this order? Do you want to send a pull request?

diff --git a/docs/src/pages/components/slider/CustomizedSlider.tsx b/docs/src/pages/components/slider/CustomizedSlider.tsx
index 265dad046..bd7066f90 100644
--- a/docs/src/pages/components/slider/CustomizedSlider.tsx
+++ b/docs/src/pages/components/slider/CustomizedSlider.tsx
@@ -72,7 +72,7 @@ const IOSSlider = withStyles({
   },
   active: {},
   valueLabel: {
-    left: 'calc(-50% + 11px)',
+    left: 'calc(-50% + 12px)',
     top: -22,
     '& *': {
       background: 'transparent',
@@ -156,9 +156,6 @@ const AirbnbSlider = withStyles({
     },
   },
   active: {},
-  valueLabel: {
-    left: 'calc(-50% + 4px)',
-  },
   track: {
     height: 3,
   },
diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js
index 67205d050..fb9fa23eb 100644
--- a/packages/material-ui/src/Slider/Slider.js
+++ b/packages/material-ui/src/Slider/Slider.js
@@ -296,7 +296,10 @@ export const styles = (theme) => ({
   /* Pseudo-class applied to the thumb element if keyboard focused. */
   focusVisible: {},
   /* Styles applied to the thumb label element. */
-  valueLabel: {},
+  valueLabel: {
+    // IE 11 centering bug, to remove from the customization demos once no longer supported
+    left: 'calc(-50% - 4px)',
+  },
   /* Styles applied to the mark element. */
   mark: {
     position: 'absolute',

[uneet7]

Can I pick this up?

[oliviertassinari]

@Uneetpatel7 Sure :)

[sparlos]

@Uneetpatel7 thanks for picking this up; I was gonna see if I could get to it later this week but things are getting very busy for me and looks like I wouldn't be able to get it it after all. and @oliviertassinari thanks for giving me the opportunity to contribute (next time for sure)! I appreciate it :)