Remove now unnecessary -ms-viewport and -ms-overflow-style directives (#27789)

Edge/Mobile appears to have moved support for `-ms-viewport` behind a flag at some point, instead supporting meta viewport directives.
Removing this altogether also fixes issues in IE11 on high-dpi displays - see https://github.com/twbs/bootstrap/issues/21780

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 8abdf1e8c7d991a06b0fd929fcf1fafa4708cf8e..d4167cc8ecf500b5153030f4ec5a6b7f3f05feb1 100644 (file)
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -14,9 +14,7 @@
 // 2. Change the default font family in all browsers.
 // 3. Correct the line height in all browsers.
 // 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
-// 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so
-//    we force a non-overlapping, non-auto-hiding scrollbar to counteract.
-// 6. Change the default tap highlight to be completely transparent in iOS.
+// 5. Change the default tap highlight to be completely transparent in iOS.
 
 *,
 *::before,
@@ -28,15 +26,7 @@ html {
   font-family: sans-serif; // 2
   line-height: 1.15; // 3
   -webkit-text-size-adjust: 100%; // 4
-  -ms-overflow-style: scrollbar; // 5
-  -webkit-tap-highlight-color: rgba($black, 0); // 6
-}
-
-// IE10+ doesn't honor `<meta name="viewport">` in some cases.
-@at-root {
-  @-ms-viewport {
-    width: device-width;
-  }
+  -webkit-tap-highlight-color: rgba($black, 0); // 5
 }
 
 // Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
@@ -240,9 +230,6 @@ pre {
   margin-bottom: 1rem;
   // Don't allow content to break outside
   overflow: auto;
-  // We have @viewport set which causes scrollbars to overlap content in IE11 and Edge, so
-  // we force a non-overlapping, non-auto-hiding scrollbar to counteract.
-  -ms-overflow-style: scrollbar;
 }
 
 

diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss
index 16f5f0dfb99484a91365ae45656c37c7bd8bbc94..d43543241971772533ad219ff15c9f7cb6fcd896 100644 (file)
--- a/scss/bootstrap-grid.scss
+++ b/scss/bootstrap-grid.scss
@@ -5,10 +5,6 @@
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 
-@at-root {
-  @-ms-viewport { width: device-width; } // stylelint-disable-line at-rule-no-vendor-prefix
-}
-
 html {
   box-sizing: border-box;
   -ms-overflow-style: scrollbar;

diff --git a/site/_data/browser-bugs.yml b/site/_data/browser-bugs.yml
index 509bf960caf6762ceaf8f5d6d23afa0db51345a4..7138c75b4287c787eab14a3b08362e48138fe5f3 100644 (file)
--- a/site/_data/browser-bugs.yml
+++ b/site/_data/browser-bugs.yml
@@ -48,16 +48,6 @@
   origin: >
     Bootstrap#18504
 
--
-  browser: >
-    Edge
-  summary: >
-    `@-ms-viewport{width: device-width;}` has side-effect of making scrollbars auto-hide
-  upstream_bug: >
-    Edge#7165383
-  origin: >
-    Bootstrap#18543
-
 -
   browser: >
     Edge