Webkit问题与css3不透明过渡？ [英] Webkit issue with css3 opacity transition?

问题描述

我遇到了这个例子，修改Bootstrap 3转盘来实现 fade 而不是'slide'。然而，在webkit中，示例中的转换不平滑 - 在项目之间闪烁。

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还在，当我使用这个代码在我的标记，项目平滑过渡，但页面上的其他元素在每个转换的开始，一个像素左右摆动。

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.

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

Is there some sort of Webkit incompatibility with opacity transitions?

推荐答案

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

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

这使得代码实例在Webkit中顺利运行，在我的代码。

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

这篇关于Webkit问题与css3不透明过渡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！