Drop Legacy Edge support.

This allows us to move forward without being held back. Microsoft already replaces the Legacy Edge with the new one on supported Windows versions.

diff --git a/.browserslistrc b/.browserslistrc
index c17ce9049c9cdf827dd3d29ce1c4540d4898d97a..122986c8eb326462ab4682b9ab0e35877f76e391 100644 (file)
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -5,7 +5,9 @@ last 1 major version
 not dead
 Chrome >= 60
 Firefox >= 60
-Edge >= 16
+# needed since Legacy Edge still has usage; 79 was the first Chromium Edge version
+# should be removed in the future when its usage drops or when it's moved to dead browsers
+not Edge < 79
 iOS >= 10
 Safari >= 10
 Android >= 6

diff --git a/js/src/dom/event-handler.js b/js/src/dom/event-handler.js
index 1d109c57ec2dfaabf159d7ea82dfc302566dedba..c228e21ba1d5bfdb1b303bee89a543cda1899fc2 100644 (file)
--- a/js/src/dom/event-handler.js
+++ b/js/src/dom/event-handler.js
@@ -6,7 +6,6 @@
  */
 
 import { getjQuery } from '../util/index'
-import { defaultPreventedPreservedOnDispatch } from './polyfill'
 
 /**
  * ------------------------------------------------------------------------
@@ -314,12 +313,6 @@ const EventHandler = {
 
     if (defaultPrevented) {
       evt.preventDefault()
-
-      if (!defaultPreventedPreservedOnDispatch) {
-        Object.defineProperty(evt, 'defaultPrevented', {
-          get: () => true
-        })
-      }
     }
 
     if (nativeDispatch) {

diff --git a/js/src/dom/polyfill.js b/js/src/dom/polyfill.js
index ed982587b61007f2c49e9df342691ff85aa9af86..c5318a1300633a691e5690e32de8bbbf52d12d6c 100644 (file)
--- a/js/src/dom/polyfill.js
+++ b/js/src/dom/polyfill.js
@@ -10,20 +10,6 @@ import { getUID } from '../util/index'
 let find = Element.prototype.querySelectorAll
 let findOne = Element.prototype.querySelector
 
-// MSEdge resets defaultPrevented flag upon dispatchEvent call if at least one listener is attached
-const defaultPreventedPreservedOnDispatch = (() => {
-  const e = new CustomEvent('Bootstrap', {
-    cancelable: true
-  })
-
-  const element = document.createElement('div')
-  element.addEventListener('Bootstrap', () => null)
-
-  e.preventDefault()
-  element.dispatchEvent(e)
-  return e.defaultPrevented
-})()
-
 const scopeSelectorRegex = /:scope\b/
 const supportsScopeQuery = (() => {
   const element = document.createElement('div')
@@ -75,6 +61,5 @@ if (!supportsScopeQuery) {
 
 export {
   find,
-  findOne,
-  defaultPreventedPreservedOnDispatch
+  findOne
 }

diff --git a/js/tests/browsers.js b/js/tests/browsers.js
index 68c26a19e9e46bdb14b5fab88bb10d419254e7c0..828edfe079a5ab8bcd89278cbf071119949f651b 100644 (file)
--- a/js/tests/browsers.js
+++ b/js/tests/browsers.js
@@ -23,13 +23,6 @@ const browsers = {
     browser: 'Firefox',
     browser_version: 'latest'
   },
-  edgeWin10: {
-    base: 'BrowserStack',
-    os: 'Windows',
-    os_version: '10',
-    browser: 'Edge',
-    browser_version: '16'
-  },
   chromeWin10: {
     base: 'BrowserStack',
     os: 'Windows',

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 35d5bbd992ea06aa6eb0ef779f52e599e6acb9aa..2d70e533a45541dd502d7d729e9cd761e9e92bdf 100644 (file)
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -295,8 +295,6 @@ samp {
 // 1. Remove browser default top margin
 // 2. Reset browser default of `1em` to use `rem`s
 // 3. Don't allow content to break outside
-// 4. Disable auto-hiding scrollbar in legacy Edge to avoid overlap,
-//    making it impossible to interact with the content
 
 pre {
   display: block;
@@ -305,7 +303,6 @@ pre {
   overflow: auto; // 3
   @include font-size($code-font-size);
   color: $pre-color;
-  -ms-overflow-style: scrollbar; // 4
 
   // Account for some code outputs that place code tags in pre tags
   code {
@@ -434,13 +431,6 @@ textarea {
   line-height: inherit;
 }
 
-// Show the overflow in Edge
-
-button,
-input {
-  overflow: visible;
-}
-
 // Remove the inheritance of text transform in Firefox
 
 button,
@@ -516,8 +506,7 @@ fieldset {
 
 // 1. By using `float: left`, the legend will behave like a block element.
 //    This way the border of a fieldset wraps around the legend if present.
-// 2. Correct the text wrapping in Edge.
-// 3. Fix wrapping bug.
+// 2. Fix wrapping bug.
 //    See https://github.com/twbs/bootstrap/issues/29712
 
 legend {
@@ -528,10 +517,9 @@ legend {
   @include font-size($legend-font-size);
   font-weight: $legend-font-weight;
   line-height: inherit;
-  white-space: normal; // 2
 
   + * {
-    clear: left; // 3
+    clear: left; // 2
   }
 }
 

diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
index b35f1c3bdc00a4ae9ce623029c21678a65ebc6eb..42e56f27b3898a575398c780fa6d6aa8c0668194 100644 (file)
--- a/scss/forms/_floating-labels.scss
+++ b/scss/forms/_floating-labels.scss
@@ -61,25 +61,3 @@
   }
   // stylelint-enable no-duplicate-selectors
 }
-
-
-//
-// Fallback for classic Edge
-//
-
-@supports (-ms-ime-align: auto) {
-  .form-floating {
-    display: flex;
-    flex-direction: column-reverse;
-  }
-  .form-floating > label {
-    position: static;
-    padding: 0;
-    margin-bottom: calc(#{$form-floating-padding-y} / 2); // stylelint-disable-line function-disallowed-list
-    border: 0;
-    @include transition(none);
-  }
-  .form-floating > .form-control::-ms-input-placeholder {
-    color: $input-placeholder-color;
-  }
-}

diff --git a/scss/forms/_form-range.scss b/scss/forms/_form-range.scss
index 6cf90138d303335f487a0263179b69e4c41f8625..b603a7bc35d54a430d6aa410d9c7df9dd9e17bf9 100644 (file)
--- a/scss/forms/_form-range.scss
+++ b/scss/forms/_form-range.scss
@@ -18,7 +18,6 @@
     // No box-shadow() mixin for focus accessibility.
     &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
     &::-moz-range-thumb     { box-shadow: $form-range-thumb-focus-box-shadow; }
-    &::-ms-thumb            { box-shadow: $form-range-thumb-focus-box-shadow; }
   }
 
   &::-moz-focus-outer {
@@ -78,46 +77,6 @@
     @include box-shadow($form-range-track-box-shadow);
   }
 
-  &::-ms-thumb {
-    width: $form-range-thumb-width;
-    height: $form-range-thumb-height;
-    margin-top: 0; // Edge specific
-    margin-right: $form-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
-    margin-left: $form-range-thumb-focus-box-shadow-width;  // Workaround that overflowed box-shadow is hidden.
-    @include gradient-bg($form-range-thumb-bg);
-    border: $form-range-thumb-border;
-    @include border-radius($form-range-thumb-border-radius);
-    @include box-shadow($form-range-thumb-box-shadow);
-    @include transition($form-range-thumb-transition);
-    appearance: none;
-
-    &:active {
-      @include gradient-bg($form-range-thumb-active-bg);
-    }
-  }
-
-  &::-ms-track {
-    width: $form-range-track-width;
-    height: $form-range-track-height;
-    color: transparent;
-    cursor: $form-range-track-cursor;
-    background-color: transparent;
-    border-color: transparent;
-    border-width: $form-range-thumb-height / 2;
-    @include box-shadow($form-range-track-box-shadow);
-  }
-
-  &::-ms-fill-lower {
-    background-color: $form-range-track-bg;
-    @include border-radius($form-range-track-border-radius);
-  }
-
-  &::-ms-fill-upper {
-    margin-right: 15px; // arbitrary?
-    background-color: $form-range-track-bg;
-    @include border-radius($form-range-track-border-radius);
-  }
-
   &:disabled {
     pointer-events: none;
 
@@ -128,9 +87,5 @@
     &::-moz-range-thumb {
       background-color: $form-range-thumb-disabled-bg;
     }
-
-    &::-ms-thumb {
-      background-color: $form-range-thumb-disabled-bg;
-    }
   }
 }

diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
index 6ebe33e1028b2f6d6233177b81cc369fef99fc7f..1866da964735cc9a8e325abc8f3ae1e87cdbf1bc 100644 (file)
--- a/scss/forms/_form-select.scss
+++ b/scss/forms/_form-select.scss
@@ -32,16 +32,6 @@
       // Avoid using mixin so we can pass custom focus shadow properly
       box-shadow: $form-select-focus-box-shadow;
     }
-
-    &::-ms-value {
-      // For visual consistency with other platforms/browsers,
-      // suppress the default white text on blue background highlight given to
-      // the selected option text when the (still closed) <select> receives focus
-      // in Edge.
-      // See https://github.com/twbs/bootstrap/issues/19398.
-      color: $input-color;
-      background-color: $input-bg;
-    }
   }
 
   &[multiple],

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 9e3e1c653943e7d6e29ce07c0086e15403d137de..b29635500b7b8668d73fcb3cdea2abcbf071b3e6 100644 (file)
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -273,7 +273,6 @@
   padding: 1rem;
   margin-bottom: 1rem;
   background-color: $gray-100;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
 
   @include media-breakpoint-up(sm) {
     padding: 1rem 1.5rem;

diff --git a/site/content/docs/5.0/forms/floating-labels.md b/site/content/docs/5.0/forms/floating-labels.md
index 16f7f08e0725f1158fca9e15a39ab098c2e28d84..d324aa92d0fd532c6281d0c9027cc78ef26ed81a 100644 (file)
--- a/site/content/docs/5.0/forms/floating-labels.md
+++ b/site/content/docs/5.0/forms/floating-labels.md
@@ -10,8 +10,6 @@ toc: true
 
 Wrap a pair of `<input class="form-control">` and `<label>` elements in `.form-floating` to enable floating labels with Bootstrap's textual form fields. A `placeholder` is required on each `<input>` as our method of CSS-only floating labels uses the `:placeholder-shown` pseudo-element. Also note that the `<input>` must come first so we can utilize a sibling selector (e.g., `~`).
 
-This approach works in the new Microsoft Edge built on Chromium and gracefully degrades on older versions.
-
 {{< example >}}
 <div class="form-floating mb-3">
   <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">

diff --git a/site/content/docs/5.0/getting-started/browsers-devices.md b/site/content/docs/5.0/getting-started/browsers-devices.md
index 572cf5e47c5f05b621be887836b3661185f3491b..7dc0743b745801cf1eed5ac9c4c538f5f5df126d 100644 (file)
--- a/site/content/docs/5.0/getting-started/browsers-devices.md
+++ b/site/content/docs/5.0/getting-started/browsers-devices.md
@@ -8,7 +8,7 @@ toc: true
 
 ## Supported browsers
 
-Bootstrap supports the **latest, stable releases** of all major browsers and platforms. This also includes the latest version of Legacy Edge (EdgeHTML layout engine).
+Bootstrap supports the **latest, stable releases** of all major browsers and platforms.
 
 Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform's web view API, are not explicitly supported. However, Bootstrap should (in most cases) display and function correctly in these browsers as well. More specific support information is provided below.
 

diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md
index d4370fe53062d139178bfc08f658b80a15859e17..64ee838244892abb2f1a34221f2e20055b805c1b 100644 (file)
--- a/site/content/docs/5.0/migration.md
+++ b/site/content/docs/5.0/migration.md
@@ -9,6 +9,10 @@ toc: true
 
 ## v5.0.0-alpha3
 
+### Browser support
+
+- Dropped support for Microsoft Edge Legacy. See [here](#browser-support-1) for the previous browser support changes.
+
 ### Colors
 
 - The color system which worked with `color-level()` and `$theme-color-interval` was removed in favor of a new color system.

diff --git a/site/layouts/_default/examples.html b/site/layouts/_default/examples.html
index 3fe1ac9bdd81ee5d2fee504da78a69555ad8b6da..9782e6a448e84a851e9db2f48fb53a21435a685f 100644 (file)
--- a/site/layouts/_default/examples.html
+++ b/site/layouts/_default/examples.html
@@ -23,7 +23,6 @@
         text-anchor: middle;
         -webkit-user-select: none;
         -moz-user-select: none;
-        -ms-user-select: none;
         user-select: none;
       }