Placeholder for transitions reset to prevent code duplication… (#29870)

Co-authored-by: Martijn Cuppens <[email protected]>
Co-authored-by: XhmikosR <[email protected]>

3 files changed, 32 insertions, 2 deletions

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index e6be84e40..e05b541fd 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -583,3 +583,14 @@ main {
 [hidden] {
   display: none !important;
 }
+
+// Placeholder used to reset transitions, when user prefers reduced motion
+
+@if $enable-prefers-reduced-motion-media-query {
+  @media (prefers-reduced-motion: reduce) {
+    %no-transition {
+      // stylelint-disable-next-line property-blacklist
+      transition: none !important;
+    }
+  }
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index c32c634de..5c24269e2 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -212,6 +212,14 @@ $escaped-characters: (
   (")","%29"),
 ) !default;
 
+// Selectors which are isolated in the transition mixin to prevent invalid selector stack
+$pseudo-vendor-prefixes: (
+  "::-webkit-",
+  "::-moz-",
+  "::-ms-"
+) !default;
+
+
 // Options
 //
 // Quickly modify global styling by enabling or disabling optional features.
diff --git a/scss/mixins/_transition.scss b/scss/mixins/_transition.scss
index 8ce35a6b8..43843e3f2 100644
--- a/scss/mixins/_transition.scss
+++ b/scss/mixins/_transition.scss
@@ -9,8 +9,19 @@
   }
 
   @if $enable-prefers-reduced-motion-media-query {
-    @media (prefers-reduced-motion: reduce) {
-      transition: none;
+    $isolate: false;
+    @each $selector in $pseudo-vendor-prefixes {
+      @if str-index(quote(#{&}), $selector) {
+        $isolate: true;
+      }
+    }
+
+    @if $isolate {
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    } @else {
+      @extend %no-transition;
     }
   }
 }