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

[skip sauce]
[skip validator]

diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css
index 08754ad9cf2e1e45129c6216b6938e5458e46e6e..99de7686c383c232249c6631e4af54b2ba72bdff 100644 (file)
--- a/dist/css/bootstrap.css
+++ b/dist/css/bootstrap.css
@@ -5827,7 +5827,36 @@ button.close {
   line-height: 1;
 }
 
-@media all and (transform-3d), (-webkit-transform-3d) {
+@media (-webkit-transform-3d) {
+  .carousel-inner > .carousel-item {
+    -webkit-transition: -webkit-transform .6s ease-in-out;
+    transition: -webkit-transform .6s ease-in-out;
+    -o-transition: transform .6s ease-in-out, -o-transform .6s ease-in-out;
+    transition: transform .6s ease-in-out;
+    transition: transform .6s ease-in-out, -webkit-transform .6s ease-in-out, -o-transform .6s ease-in-out;
+    -webkit-backface-visibility: hidden;
+            backface-visibility: hidden;
+    -webkit-perspective: 1000px;
+            perspective: 1000px;
+  }
+  .carousel-inner > .carousel-item.next, .carousel-inner > .carousel-item.active.right {
+    left: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+            transform: translate3d(100%, 0, 0);
+  }
+  .carousel-inner > .carousel-item.prev, .carousel-inner > .carousel-item.active.left {
+    left: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+            transform: translate3d(-100%, 0, 0);
+  }
+  .carousel-inner > .carousel-item.next.left, .carousel-inner > .carousel-item.prev.right, .carousel-inner > .carousel-item.active {
+    left: 0;
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+  }
+}
+
+@supports ((-webkit-transform: translate3d(0, 0, 0)) or (transform: translate3d(0, 0, 0))) {
   .carousel-inner > .carousel-item {
     -webkit-transition: -webkit-transform .6s ease-in-out;
     transition: -webkit-transform .6s ease-in-out;

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 9386983d177d404b4f3810e2a3f074b49e0ef694..625ab1c8de8fb5f3a942ad5c3ff40bef17ef2c4d 100644 (file)
--- a/scss/_carousel.scss
+++ b/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;

diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 375e8486d2c15b82036bd4bbd4ab712cb0054390..6d613b9a36452f43e80e3fe3c988273fcf782ec7 100644 (file)
--- a/scss/_mixins.scss
+++ b/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

diff --git a/scss/mixins/_transforms.scss b/scss/mixins/_transforms.scss
new file mode 100644 (file)
index 0000000..4005c9d
--- /dev/null
+++ b/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;
+  }
+}