Slider handle is misplaced inside of the slider bar on IE11

[kjellr]

Describe the bug

On IE11, the handle (dot) of the slider component we use in our Settings Sidebar appears clipped inside of the slider bar:

The slider also appears to be only 1px tall. As a result, the slider is difficult to use in this case.

To Reproduce

1. Use IE11
2. Add one of the following blocks: paragraph, cover image, column, latest comments, latest posts, gallery.
3. Look in the block settings panel for the slider.
4. See error

Appearance in Safari for reference

Appearance in IE11

Tested in
Windows 7, IE 11.0.9600.19080
Gutenberg 3.4

[aduth]

Confirmed this is still an issue as of 2019-05-31.

Suggestions to explore for possible resolution:

• The thumb styles for the range are custom, and even include an Internet Explorer specific implementation. There may be an error in this implementation (cc @jasmussen re: introduction in Polish gallery inspector, inspector headings, slider #2020)

  • gutenberg/packages/components/src/range-control/style.scss

    Lines 71 to 78 in 1d2d1fc

    	// ie
    	&::-ms-thumb {
    	@include range-thumb();
    	margin-top: 0; // necessary because edge inherits from chrome
    	height: 14px;
    	width: 14px;
    	border: 2px solid transparent;
    	}

• The slider has a height of 1px, intentional for the non-thumb portion of the range control. I expect in other browsers, it's assumed (and working correctly) that the thumb would overflow out of this container. See CSS overflow.

[jasmussen]

I'm unaware of why the slider may have regressed — I've a good VM set up, so I'm pretty confident that it must've worked when I shipped that PR. So I would also suggest that the 1px height is likely the issue.

[tellthemachines]

Lack of visibility of the slider is no longer an issue in IE, but the handle now appears incorrectly positioned:

This can be easily fixed by removing the padding-top: 15px; from the parent Wrapper. Removing it has no effect on the other browsers.

[paaljoachim]

Is this issue still valid? What is the next step?

[youknowriad]

IE11 support is being dropped, context:

• https://make.wordpress.org/core/2021/03/04/discussion-dropping-support-for-ie11/
• https://make.wordpress.org/core/2021/03/25/discussion-summary-dropping-support-for-ie11/
• https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/

I'm closing this issue as it's not something we'll be investing in.