我有一个父元素和一个子元素:
.parent {
will-change: transform;
overflow: hidden;
position: absolute;
}
.child {
position: fixed;
top: 80px;
left: 80px;
}
without will-change:transform
style, .child
元素无论父元素的位置如何overflow:hidden
将基于窗口定位。
现在既然.parent
不仅有这种风格top
and left
of .child
计算自.parent
, 但是也overflow:hidden
适用于.child
too.
看起来position:fixed
如果我们添加将被完全忽略will-change:transform
看看这里:https://jsbin.com/beluweroti/1/edit?html,css,输出 https://jsbin.com/beluweroti/1/edit?html,css,output
Note:我不添加这种风格.parent
,所以我不能简单地删除它。
我可以处理定位,并设置正确left
and top
,但问题是
我怎么能忽视overflow:hidden
对于固定位置的孩子?
From 规格 https://drafts.csswg.org/css-will-change/#will-change:
如果属性的任何非初始值都会导致元素为固定定位的元素生成包含块,指定 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 https://www.w3.org/TR/css-transforms-1/#transform-rendering
因此,变换正在为固定位置元素创建一个包含块,并且will-change
应该做同样的事情,因为.parent
现在是固定元素的包含块,它也会对其应用溢出。
如果您无法删除,基本上您什么也做不了will-change
属性或更改其值.parent
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)