在 will-change:transform 之后保持 overflow:hidden 行为

Question

我有一个 parent 和一个 child 元素：

.parent {
  will-change: transform;
  overflow: hidden;
  position: absolute;
}

.child {
  position: fixed;
  top: 80px;
  left: 80px;
}

没有will-change:transform样式，.child元素无论parent的位置如何，overflow:hidden将基于window.[=40=定位] 现在 .parent 有了这个样式，不仅 .child 的 top 和 left 从 .parent 计算，而且 overflow:hidden 应用于 .child也是。
如果我们添加 will-change:transform
似乎 position:fixed 将被完全忽略 看这里：https://jsbin.com/beluweroti/1/edit?html,css,output

注意：我没有在.parent中添加这个样式，所以我不能简单地删除它。

我可以处理定位，设置正确的left和top，但问题是
我怎么能忽略 overflow:hidden for fixed-positioned children?

Answer 1

来自the specification：

If any non-initial value of a property would cause the element to generate a containing block for fixed positioned elements, specifying that property in will-change must cause the element to generate a containing block for fixed positioned elements

所以基本上你面临的问题是转换而不是 will-change 因为：

For elements whose layout is governed by the CSS box model, any value other than none for the transform property also causes the element to establish a containing block for all descendants. Its padding box will be used to layout for all of its absolute-position descendants, fixed-position descendants, and descendant fixed background attachments.^ref

所以转换正在为固定位置元素创建一个包含块，will-change 应该做同样的事情，因为 .parent 现在是固定元素的包含块，它也会应用它的溢出它。

基本上，如果您不能删除 will-change 属性或将其值从 .parent

更改为

在 will-change:transform 之后保持 overflow:hidden 行为

Keep overflow:hidden behavior after will-change:transform

css

will-change