Bootstrap 3.3.1 carousel animation not working with LESS - twitter-bootstrap-3

Question

I am working on a Bootstrap template that I am building on the Bootstrap 3.3.1 LESS files compiled on the go (as a temporary solution) with less.min.js. The problem is when I try to flip slides of the Bootstrap carousel they do so with no animation. Chrome Dev tools gave me this:
.carousel-inner > .item {
transition: transform 0.6s ease-in-out;
backface-visibility: hidden;
perspective: 1000;
}
As you can see there is not -webkit-transition line for some reasons.
Switching to bootstrap.css or replacing the carousel.less file with that from v3.3.0 resolves the issue. Is it a Bootstrap issue or is it something on my side?

Answer 1

You should run the autoprefixer (since version 3.2), also see https://github.com/twbs/bootstrap/issues/15203
Cause your are compiling client side, you can NOT run this plugin. Alternatively you can use -prefix-free.
Notice that the autoprefixer is part of TB default build process now.
Thought they were supposed to use mixins internally until v4
Yes, probably. But i seems new added code is not longer prefixed by mixins. Code that used a mixin before v3.2. already, are not replaced before v4.
You can see the above in the less/carousel.less file, that contains the following code (reflecting your issue):
// WebKit CSS3 transforms for supported devices
#media all and (transform-3d), (-webkit-transform-3d) {
transition: transform .6s ease-in-out;
backface-visibility: hidden;
perspective: 1000;