From 18e1bfa66250a4593cc36a9adb3b9231e5646f82 Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@rebertia.com>
Date: Wed, 25 Mar 2015 18:24:56 -0700
Subject: [PATCH] Carousel: Add @supports 3D transforms feature query; fixes
 #15534

---
 less/carousel.less        | 28 ++++++----------------------
 less/mixins.less          |  1 +
 less/mixins/carousel.less | 22 ++++++++++++++++++++++
 3 files changed, 29 insertions(+), 22 deletions(-)
 create mode 100644 less/mixins/carousel.less

diff --git a/less/carousel.less b/less/carousel.less
index 4bbe946d3aa8..e26b5923b30d 100644
--- 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
index af4408fc2d68..db0916fa4a83 100644
--- 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
new file mode 100644
index 000000000000..8961e9609bce
--- /dev/null
+++ 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;
+  }
+}