Add @supports feature query for Carousel CSS 3D transforms; fixes #15534

 (#19751)

[skip sauce]
[skip validator]

scss/_carousel.scss

@@ -20,8 +20,8 @@
       line-height: 1;
     }
 
-    // WebKit CSS3 transforms for supported devices
-    @media all and (transform-3d), (-webkit-transform-3d) {
+    // CSS3 transforms when supported by the browser
+    @include if-supports-3d-transforms() {
       transition: transform .6s ease-in-out;
       backface-visibility: hidden;
       perspective: 1000px;

scss/_mixins.scss

@@ -28,6 +28,7 @@
 @import "mixins/text-emphasis";
 @import "mixins/text-hide";
 @import "mixins/text-truncate";
+@import "mixins/transforms";
 @import "mixins/visibility";
 
 // // Components

scss/mixins/_transforms.scss

@@ -0,0 +1,14 @@
+// Applies the given styles only when the browser support CSS3 3D transforms.
+@mixin if-supports-3d-transforms() {
+  @media (-webkit-transform-3d) {
+    // Old Safari, Old Android
+    // http://caniuse.com/#feat=css-featurequeries
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transform-3d
+    @content;
+  }
+
+  @supports (transform: translate3d(0,0,0)) {
+    // The Proper Way: Using a CSS feature query
+    @content;
+  }
+}