保持溢出：will-change之后的隐藏行为：transform [英] Keep overflow:hidden behavior after will-change:transform

问题描述

我有一个父元素和一个子元素：

I have a parent and a child elements:

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

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

而没有 will-change：transform 样式， .child 元素（无论父级位置如何）和 overflow：hidden 都将基于窗口定位。 br>
现在 .parent 具有这种样式，不仅 top 和 .child 的>左从 .parent 计算，但也从 overflow：hidden 也适用于 .child 。

似乎 position：fixed 如果添加 will-change：transform

，请完全忽略： https://jsbin.com/beluweroti/1/edit?html,css，输出

without will-change:transform style, .child element regardless of parent's position and overflow:hidden will be positioned based on window.
Now that the .parent has this style, not only top and left of .child calculate from .parent, but also overflow:hidden applies on .child too.
It seems that position:fixed will be totally ignored if we add will-change:transform
Take a look here: https://jsbin.com/beluweroti/1/edit?html,css,output

注意：我不会将此样式添加到 .parent ，所以我不能简单地将其删除。

Note: I don't add this style to .parent, so I cannot simply remove it.

我可以处理定位问题，并设置正确的 left 和 top ，但q问题是

对于固定位置的孩子，我如何忽略 overflow：hidden ？

I can deal with positioning, and set correct left and top, but the question is
how can I ignore overflow:hidden for fixed-positioned children?

推荐答案

来自规范 ：

如果属性的任何非初始值都会导致元素为固定位置的元素生成包含块，在will-change中指定属性必须使元素为固定位置的元素生成一个包含块

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

所以基本上面对转换问题而不是意志改变问题，因为：

So basically you are facing the issue with transform and not the will-change because:

对于其布局由CSS box模型控制的元素，其他任何值而不是transform属性的值也导致元素为所有后代建立一个包含块。其填充框将用于布局其所有绝对位置后代，固定位置后代和后代固定背景附件。 ^参考

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

因此，transform为固定位置元素创建了一个包含块，并且会更改应该执行相同的操作，因为 .parent 现在是固定元素的包含块，它也将对其应用溢出。

So transform is creating a containing block for fixed position element and will-change should do the same and since the .parent is now the containing block of the fixed element it will also apply its overflow on it.

基本上，如果无法删除<$，您将无能为力c $ c>将更改属性或将其值从 .parent

Basically you can do nothing if you cannot remove the will-change property or change its value from .parent

这篇关于保持溢出：will-change之后的隐藏行为：transform的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！