From ab67ffe167a7d2d7f8cd54ae22c48507f49ecbb8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 8 Apr 2017 15:20:26 -0700 Subject: [PATCH] Ensure carousel works in IE10/11 - Drops the `if-supports-3d-transforms()` mixin since all our browsers do support it - Updates carousel to not rely on that mixin --- scss/_carousel.scss | 33 ++++++++++++++------------------- scss/_mixins.scss | 1 - scss/mixins/_transforms.scss | 14 -------------- 3 files changed, 14 insertions(+), 34 deletions(-) delete mode 100644 scss/mixins/_transforms.scss diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 1b6e450ae2..70c3cc64dd 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -13,12 +13,9 @@ position: relative; display: none; width: 100%; - - @include if-supports-3d-transforms() { - @include transition($carousel-transition); - backface-visibility: hidden; - perspective: 1000px; - } + @include transition($carousel-transition); + backface-visibility: hidden; + perspective: 1000px; } .carousel-item.active, @@ -34,21 +31,19 @@ } // CSS3 transforms when supported by the browser -@include if-supports-3d-transforms() { - .carousel-item-next.carousel-item-left, - .carousel-item-prev.carousel-item-right { - transform: translate3d(0, 0, 0); - } +.carousel-item-next.carousel-item-left, +.carousel-item-prev.carousel-item-right { + transform: translate3d(0, 0, 0); +} - .carousel-item-next, - .active.carousel-item-right { - transform: translate3d(100%, 0, 0); - } +.carousel-item-next, +.active.carousel-item-right { + transform: translate3d(100%, 0, 0); +} - .carousel-item-prev, - .active.carousel-item-left { - transform: translate3d(-100%, 0, 0); - } +.carousel-item-prev, +.active.carousel-item-left { + transform: translate3d(-100%, 0, 0); } diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 13aad24875..cc3394f0a0 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -14,7 +14,6 @@ @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 deleted file mode 100644 index 4005c9d028..0000000000 --- a/scss/mixins/_transforms.scss +++ /dev/null @@ -1,14 +0,0 @@ -// 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; - } -}