I have a parent and a child elements:
.parent {
will-change: transform;
overflow: hidden;
position: absolute;
}
.child {
position: fixed;
top: 80px;
left: 80px;
}
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
Note: I don't add this style to .parent
, so I cannot simply remove it.
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?
From 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
So basically you are facing the issue with transform and not the will-change because:
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
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.
Basically you can do nothing if you cannot remove the will-change
property or change its value from .parent