Chrome中的Css过渡(不透明度,变换)口吃但不是Firefox,Edge等

时间:2018-03-02 16:49:51

标签: css

使用过渡时,我无法解决Chrome / Opera中的口吃问题 - 例如不透明度,变换,过滤等。

为简单起见,我将专注于不透明度。

这里的实例: http://www.lydkontoret.dk/index.php?pgId=20&pgName=Lyd+%26+lys

单击横幅下方的其中一个图片时,会显示一个大版本。我这样做是通过在页面顶部添加一个全屏div来防止访问页面元素。 div通过不透明度转换淡入淡出。在这个div的顶部添加了另外的div来保存图像。

注意单击图片时全屏元素的不透明度转换。在24"监视器与浏览器窗口最大化,铬/歌剧口吃像疯了,而firefox / msie / msedge相当顺利。 更复杂的是,Chrome / Opera在浏览器窗口较小时执行正常 - 因为渲染引擎显然能够应对。

我已尝试在所涉及的各种元素上使用will-change和translateZ(0),但chrome并不关心(删除横幅很有帮助 - 正如预期的那样,因为渲染引擎具有少处理)。

此外,它主要是口吃的淡化。关闭图像显示时,将全屏元素转换回完全透明通常看起来可以接受。

我认为我的编码没问题,因为Firefox等可以很好地完成各种转换。那么为什么chrome和opera使用闪烁引擎的问题呢?

有什么想法?

0 个答案:

没有答案