表tbody垂直滚动条在滚动时闪烁

Question

我试图使表格的标题行固定。 通过将overflow-y:scroll添加到表tbody中，我实现了这一点。 我还添加了一些JavaScript来调整表格的子级宽度。

在Mozilla Firefox中进行测试时，我注意到当左右移动水平滚动条时，垂直滚动条会闪烁。

这是它的codepen 。 请同时使用Firefox和Chrome（或其他浏览器，但绝对是Firefox）打开。

https://codepen.io/danae-vogiatzi/pen/BOPLow

Answer 1

不幸的是，由于Firefox异步处理滚动，因此会发生此问题。 https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects

滚动效果通常是通过侦听scroll事件，然后以某种方式（通常是CSS position或transform属性）更新页面上的元素来实现的。[...]

这些效果在浏览器的主线程上同步完成滚动的浏览器中效果很好。 但是，现在大多数浏览器都支持某种异步滚动，以便为用户提供每秒60帧的一致体验。 在异步滚动模型中，可视滚动位置在合成器线程中更新，并且在DOM中更新滚动事件并在主线程上触发之前，用户可见。 这意味着所实现的效果将稍稍落后于用户所看到的滚动位置。 这可能会导致效果过时，过时或抖动-简而言之，我们要避免这种情况。

这意味着子级宽度的计算与滚动事件无关。 如果要支持Firefox，则必须提出一种纯CSS解决方案，或者独立于scroll事件调整子级宽度。 或只是接受它作为一个小问题而继续前进。