Webkit issue with css3 transparency transition?

Question

I came across this example of a Bootstrap 3 carousel modification to achieve fade instead of a “slide”. However, in webkit, the transition in the example is not smooth - these are varieties of flashes between elements.

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

More strange, when I use this code in my markup, the element moves smoothly, and other elements on the page are sorted by pixels or around the beginning of each transition.

Is there any incompatibility of Webkit with opacity transitions?

Answer 1

There may be several ways to solve this problem, but the answer to this question suggests adding the following to the element to which the transition applies:

-webkit-transform: translateZ(0);

This causes the codepen example to run smoothly in Webkit and also fixes the problem that I experienced in my code.

Answer 2

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

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