"-webkit-backface-visibility:hidden"的替代方法可防止闪烁



我一直在使用-webkit-backface-visibility: hidden;来阻止css过渡闪烁,但结果我的position: fixed;不再在FF或Safari中固定(见小提琴:http://jsfiddle.net/liguha/ssqksnv0/)

还有其他选择吗?最好没有javascript来解决这个问题。

和这个打了好几次。 在"*, *:之前, *:之后" 中执行此操作可能会导致问题。尝试在任何和所有元素上获得图形加速也可能导致下游出现一些延迟。 调整盒子大小通常是一个安全的赌注,就像保证金/填充一样。

那么什么是动画呢? 通常,如果要进行变换,则需要添加 preserve-3d 和透视。 至少在父/子关系中,您需要更好地管理设置这些值的图层。

我使用过的一般规则 -围绕我正在制作动画的容器:

perspective: 800px;

我正在制作动画的内容:

backface-visiblity: hidden;
transform: translate3d(0,0,0);
transform-style: preserve-3d;

如果我仍然有闪烁问题,我通常会添加 transform: translateZ(0); 到我正在动画的一些直接闪烁的子元素。

这绝对是一个令人恼火的问题,已经持续了多年,不幸的是,所有的技巧/技巧都会老化并贬值。 查看谷歌浏览器的控制台以检查重绘,并确保滚动时不会重新绘制整个页面。 典型的标志时间是翻译Z(0)在动画的内容上。

祝你好运

相关内容

  • 没有找到相关文章

最新更新