Webkit issue with css3 opacity transition?

Question

I came across this example of modifying the Bootstrap 3 carousel to achieve a fade instead of a 'slide'. In webkit, however, the transition in the example is not smooth - it sort of flashes between items.

http://codepen.io/Rowno/pen/Afykb

Weirder still, when I use this code in my markup, the item transitions smoothly but other elements on the page sort of jiggle by a pixel or so at the start of each transition.

Is there some sort of Webkit incompatibility with opacity transitions?

Answer 1

change the background of your body and and ease to your transition

body{
 bacground:black; 
}
.carousel-fade {
  .carousel-inner {
    .item {
      opacity: 0;
      -webkit-transition: opacity 300ms ease-in-out;
      -moz-transition: opacity 300ms ease-in-out;
       transition: opacity 300ms ease-in-out;
    }

    .active {
      opacity: 1;
    }

    .active.left,
    .active.right {
      left: 0;
      opacity: 0;
      z-index: 1;
    }

    .next.left,
    .prev.right {
      opacity: 1;
    }
  }

  .carousel-control {
    z-index: 2;
  }
}



html, 
body, 
.carousel, 
.carousel-inner, 
.carousel-inner .item {
  height: 100%;
}

.item:nth-child(1) {
  background: darkred;
}

.item:nth-child(2) {
  background: red;
}

.item:nth-child(3) {
  background: orange;
}

Answer 2

There may be more than one way to address this, but an answer to this question suggests adding the following to the item upon which the transition is being applied:

-webkit-transform: translateZ(0);

This gets the codepen example working smoothly in Webkit, and also fixes the problem I was having in my code.