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

twbs · Mar 26, 2015 · 18e1bfa · 18e1bfa
1 parent d6714d1
commit 18e1bfa
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 22 deletions.
diff --git a/less/carousel.less b/less/carousel.less
@@ -25,28 +25,12 @@
       line-height: 1;
     }
 
-    // WebKit CSS3 transforms for supported devices
-    @media all and (transform-3d), (-webkit-transform-3d) {
-      .transition-transform(~'0.6s ease-in-out');
-      .backface-visibility(~'hidden');
-      .perspective(1000);
-
-      &.next,
-      &.active.right {
-        .translate3d(100%, 0, 0);
-        left: 0;
-      }
-      &.prev,
-      &.active.left {
-        .translate3d(-100%, 0, 0);
-        left: 0;
-      }
-      &.next.left,
-      &.prev.right,
-      &.active {
-        .translate3d(0, 0, 0);
-        left: 0;
-      }
+    // CSS3 transforms for supported devices
+    @media all and (transform-3d), (-webkit-transform-3d) { // WebKit, old Blink
+      .carousel-css3-transforms();
+    }
+    @supports (transform: translate3d(0,0,0)) { // Firefox, recent Blink
+      .carousel-css3-transforms();
     }
   }
 

diff --git a/less/mixins.less b/less/mixins.less
@@ -18,6 +18,7 @@
 // Components
 @import "mixins/alerts.less";
 @import "mixins/buttons.less";
+@import "mixins/carousel.less";
 @import "mixins/panels.less";
 @import "mixins/pagination.less";
 @import "mixins/list-group.less";

diff --git a/less/mixins/carousel.less b/less/mixins/carousel.less
@@ -0,0 +1,22 @@
+.carousel-css3-transforms() {
+  .transition-transform(~'0.6s ease-in-out');
+  .backface-visibility(~'hidden');
+  .perspective(1000);
+
+  &.next,
+  &.active.right {
+    .translate3d(100%, 0, 0);
+    left: 0;
+  }
+  &.prev,
+  &.active.left {
+    .translate3d(-100%, 0, 0);
+    left: 0;
+  }
+  &.next.left,
+  &.prev.right,
+  &.active {
+    .translate3d(0, 0, 0);
+    left: 0;
+  }
+}