css3不透明度转换的Webkit问题？

Question

我遇到了修改引导程序3传送​​带的示例，以实现fade而不是“幻灯片”。但是，在webkit中，示例中的转换并不顺利 - 它在各个项目之间闪烁。

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

怪异的是，当我在我的标记使用此代码，该项目顺利过渡，而是由一个像素左右，在每一个转变的开始上的排序轻摇页面的其他元素。

是否有某种Webkit与不透明度转换不兼容？

Answer 1

有可能是解决这一不止一种方法，但回答this question建议添加以下的项目在其过渡正在应用：

-webkit-transform: translateZ(0);

这得到了codepen例如，在Webkit的工作顺利进行，同时也修复了我在我的代码有问题。

Answer 2

改变你的身体的背景，缓解您的过渡

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