rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

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

Browse Source 
[skip sauce]
[skip validator]
This commit is contained in:
Chris Rebert 2016-11-25 14:51:55 -08:00 committed by Mark Otto
parent 3cfd40782c
commit 3593ee85c1
4 changed files with 47 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
dist/css/bootstrap.css
View File

@ -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;

4
scss/_carousel.scss
View File

@ -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;

1
scss/_mixins.scss
View File

@ -28,6 +28,7 @@
@import "mixins/text-emphasis";
@import "mixins/text-hide";
@import "mixins/text-truncate";
@import "mixins/transforms";
@import "mixins/visibility";
// // Components

14
scss/mixins/_transforms.scss Normal file
View File

@ -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;
}
}