From f56f486b1be545472dad933242e290a87004f8f8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 8 Apr 2017 15:20:26 -0700 Subject: [PATCH 1/5] 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 1b6e450ae2be..70c3cc64dd7b 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 13aad24875c4..cc3394f0a035 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 4005c9d028d3..000000000000 --- 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; - } -} From 0857713a38444bf76bb1a51183aed8a0c26fe06f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 8 Apr 2017 15:21:43 -0700 Subject: [PATCH 2/5] drop img-fluid for w-100 --- docs/components/carousel.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/components/carousel.md b/docs/components/carousel.md index 405aee18cbc5..e754843167dd 100644 --- a/docs/components/carousel.md +++ b/docs/components/carousel.md @@ -30,13 +30,13 @@ Here's a carousel with slides only. Note the presence of the `.d-block` and `.im @@ -50,13 +50,13 @@ Adding in the previous and next controls: