html - 替代 "-webkit-backface-visibility:hidden"以停止闪烁

Question

我一直在使用 -webkit-backface-visibility: hidden; 来阻止 css 转换闪烁，但结果我的 position: fixed; 不再在 FF 或 Safari 中修复(参见 fiddle :http://jsfiddle.net/liguha/ssqksnv0/)

还有其他选择吗？最好不用 javascript 来解决这个问题。

Answer 1

为此打了好几次。在 "*, *:before, *:after"中执行此操作可能会导致问题。尝试在任何和所有元素上获得图形加速可能也会导致下游有点滞后。 box-sizing 通常是一个安全的选择，就像 margin/padding 一样。

那么什么是动画？通常，如果您正在进行变换，您会想要添加 preserve-3d 和透视图。至少从父/子关系来看，您将希望更好地管理在哪些层上设置这些值。

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

perspective: 800px;

我正在制作的动画:

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

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

这绝对是一个令人恼火的问题，现在已经持续多年，不幸的是，所有的技巧/技巧都会老化并贬值。查看 Google Chrome 的控制台以检查重新绘制并确保在滚动时不会重新绘制整个页面。典型的标志是在什么动画内容上进行 translateZ(0) 的时间。

祝你好运