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