火狐定位固定元素flash答案

【问题标题】：Firefox position fixed element flash火狐定位固定元素flash
【发布时间】：2018-12-01 09:02:27
【问题描述】：

这只是 Firefox 中的一个问题。我正在使用 v60.0.2（64 位）

我遇到了transition div 中的position:fixed div 的问题。 position:fixed 元素将随着元素转换而闪烁。它在 Chrome、Edge 和 IE 中按预期工作。见codepen：

编辑：添加硬件加速有效，但我需要 strange text 在滚动幻灯片时保持在同一个位置。我通过不使用硬件加速并将position:fixed 更改为position:sticky 使其工作。这在 chrome 中不起作用。我猜粘滞在浏览器之间的处理方式不同，所以我添加了

@supports (-moz-appearance:none) { position: sticky; }

我希望此编辑对某人有所帮助。我在这个问题上花了太多时间。

【问题讨论】：

【解决方案1】：

添加到元素：

transform: translateZ(0);
-webkit-transform: translateZ(0);

强制浏览器使用硬件加速。基本上，您是在告诉浏览器您想要进行 3D 转换，这会迫使它访问 GPU，从而使您的转换变得漂亮而清晰。您可以在此处了解有关 CSS 中的硬件加速的更多信息：

【讨论】：