开启 CSS 硬件加速时，fixed 定位元素不再相对于视口进行定位的原因

[SyMind]

问题

当给一个元素使用 transform、will-change 等属性开启 CSS 硬件加速时，会导致 fixed 定位元素不再相对于视口（viewport）进行定位。

原因

fixed 定位的元素相对于 fixed 定位包含块（fixed positioning containing block，通常是视口）进行定位和调整大小。

元素的包含块（containing block）由距离最近的创建了 fixed 定位包含块的祖先元素建立：

• 如果祖先不是行级元素 包含块由祖先的 padding 边界形成。
• 如果祖先是行级元素 包含块由祖先的第一个 box fragment 的 block-start 和 inline-start 内容边界，和最后一个 box fragment 的 block-end 和 inline-end 内容边界决定。

如果没有祖先元素创建，那么 fixed 定位包含块为视口，因此，在滚动文档时，fixed 定位的元素不会移动。

可以使元素创建 fixed 定位包含块的属性有 transform、will-change、contain 等。

参考

• https://drafts.csswg.org/css-position/#fixed-positioning-containing-block