1

我看到了一个奇怪的问题，并花了很多时间试图通过 SO/blogs 和在 Chrome 的错误跟踪器中找到一个活跃的问题来追踪它。

链接：https ://jsfiddle.net/Lftwqh8p/1/

问题：这只发生在 Chrome 中。在 JS 中，我有一个注释掉的行来在使用 mixins 之间切换。两者都有自己的问题，具有相同的根本问题。

问题图片： 在此处输入图像描述

所以我们看到的是滚动条的宽度

::-webkit-scrollbar {
  width: 25px;
  height: 10px;
}

直接影响第一列的偏离程度。如果我们在 IE 或 Firefox 中查看它，我们会看到它按预期工作（采用全宽，或者列标题位于正确的位置）。

如果我们删除 will-change: transform 或 position: sticky 的 CSS，这将解决问题。

所以我怀疑这是一个浏览器问题，特别是 Chrome 如何在 Stacking Context 或 Compositing Layer 上呈现这些问题。这些都发生在使用 position sticky 和 ​​will-change 设置为 transform 时。

我找不到有关此类问题的任何信息，因为我们的用例似乎对我们来说有点特定，但是是必要的（性能）。

关于问题可能是什么的任何想法？

4

0 回答 0