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

我遇到了一个修改Bootstrap3Carousel以实现淡入淡出而不是“滑动”的示例。然而，在webkit中，示例中的转换并不平滑——它在项目之间有点闪烁

更奇怪的是，当我在标记中使用这段代码时，项目平滑地转换，但页面上的其他元素在每次转换开始时都会抖动一个像素左右

---

是否存在某种Webkit与不透明过渡不兼容的情况？

更改身体背景，并轻松过渡

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

---

改变你身体的背景，轻松过渡

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

---

解决这一问题的方法可能不止一种，但对的回答建议在应用转换的项目中添加以下内容：

-webkit转换：translateZ（0）

这使codepen示例在Webkit中顺利运行，并修复了我在代码中遇到的问题
 解决这一问题的方法可能不止一种，但答案建议在应用转换的项目中添加以下内容：

-webkit转换：translateZ（0）

这使codepen示例在Webkit中顺利运行，并修复了我在代码中遇到的问题