Scrollbar bug on Windows 10 with IE 11, HiDPI Monitor

Created by: strebl

Hi guys

I encountered a bug on Windows 10 with Internet Explorer 11 and Bootstrap v4.0.0-alpha.6. The scrollbar is visible and hidden randomly if I resize the window. Let me start with two GIFs which demonstrate the issue on a page without any elements except the html structure and body: As you can see, on some sizes the scrollbars are visible and on other sizes they are hidden.

The second GIF demonstrates the problem on https://v4-alpha.getbootstrap.com itself: Same problem. The only difference there is that the scrollable distance is shorter. That's because the vertical scrollbar is needed. If I remove elements until it fits vertically, the scrollable distance is the same comparing to GIF 1.

Workaround

If I change the viewport width to auto, everything behaves as expected.

@-ms-viewport {
  width: auto;
}

Tests

I tested this on two computers with HiDPI displays:

Type	Windows Version	Resolution	Scaling	Issue
Desktop	Windows 10 Pro Insider Preview 1607 Build 15007	3840x2160	200%	Yes
Tablet - Microsoft Surface	Windows 10 Pro 1511 Build 10586	2736x1824	200%	Yes

...and on two computers without HiDPI displays:

Type	Windows Version	Resolution	Scaling	Issue
Desktop	Windows 10 Pro 1607 Build 14393	1920x1200	100%	No
Notebook	Windows 10 Pro 1607 Build 14393	1920x1080	100%	No

As you can see, it happens only with HiDPI displays.

To clarify, I don't have that issue with Edge, only with IE!

I hope I provided enough details!