Carousel code partially doesn't use vendor-prefixes mixins
Created by: komor72
https://github.com/twbs/bootstrap/blob/master/less/carousel.less#L30 and also in Sass variant: https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_carousel.scss#L30
The @media
code from line 30 to 47 doesn't use vendor-prefixes mixin names but plain CSS attributes without prefix variants. This breaks Carousel transitions on my Safari 6.1 on OS X 10.7, in my code using Middleman and Bootstrap-Sass. After googling I'm pretty convinced I'm not the only victim. Curiously, the Carousel example from project's homepage works OK and CSS inspection shows me all vendor-specific declarations.
I've fixed this in my local gem copy, and now it works in my project. Sorry for Sass code instead of Less, but I work on Sass and verified my change on Sass version only:
// WebKit CSS3 transforms for supported devices
@media all and (transform-3d), (-webkit-transform-3d) {
@include transition-transform (.6s ease-in-out);
@include backface-visibility (hidden);
@include perspective (1000);
&.next,
&.active.right {
@include translate3d (100%, 0, 0);
left: 0;
}
&.prev,
&.active.left {
@include translate3d(-100%, 0, 0);
left: 0;
}
&.next.left,
&.prev.right,
&.active {
@include translate3d(0, 0, 0);
left: 0;
}
}