Set -ms-overflow-style:scrollbar to workaround apparent IE11+Edge @viewport bug

Closes #18543

1 files changed, 7 insertions, 0 deletions

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index a3e4175a4..5b0f09bbe 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -62,6 +62,13 @@ html {
 html {
   // Sets a specific default `font-size` for user with `rem` type scales.
   font-size: $font-size-root;
+  // As a side-effect of setting the @viewport above,
+  // IE11 & Edge make the scrollbar overlap the content and automatically hide itself when not in use.
+  // Unfortunately, the auto-showing of the scrollbar is sometimes too sensitive,
+  // thus making it hard to click on stuff near the right edge of the page.
+  // So we add this style to force IE11 & Edge to use a "normal", non-overlapping, non-auto-hiding scrollbar.
+  // See https://github.com/twbs/bootstrap/issues/18543
+  -ms-overflow-style: scrollbar;
   // Changes the default tap highlight to be completely transparent in iOS.
   -webkit-tap-highlight-color: rgba(0,0,0,0);
 }