[BasicUI] Slider knob not showing in BasicUI on Microsoft Edge

[FusedHe3]

Hi everybody,

I know this isn't a major issue, but I noticed that the slider knob is missing when using the BasicUI in Microsoft Edge. This makes adjusting the slider a bit tricky.
Edge:

IE:

Using the F12 DOM Explorer and comparing the CSS styling between Edge and Internet Explorer, I discovered that the height of .mdl-slider.is-upgraded is set to 2px in Edge and due to an override from _:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded it is set to 32px in IE. As this override doesn't happen in Edge, the height stays at 2px and the knob isn't showing.

Edge:

IE:

Setting the height to 32px in Edge fixes the problem.

I don't know if this is an issue inherent to Google Material Design or if there is a simple fix. But it would be nice to see the slider working in Edge to, as I use it as my primary browser on all my devices.

Thanks!

[kaikreuzer]

@resetnow, could you please have a look?

[vlad-ivanov-name]

It looks like this particular problem is present upstream — I tried updating MDL to a latest version and it looked even worse. Also, even with the width property applied the knob is off by 10-20 pixels to the left. I'll try to fix it upstream and then backport the fix here — I assume in this case we won't have to deal with the legal approval process.

[vlad-ivanov-name]

Relevant issue: google/material-design-lite#1625

[FusedHe3]

Great, thanks!

[vlad-ivanov-name]

It seems Google's MDL is in limited support mode — it may not be possible to push a full fix there. So I have opened #2932 with a CSS hack for sliders, it doesn't fix them completely but at least the knob is visible and can be moved.

[FusedHe3]

Thanks @resetnow! At least it's working now :D