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:
So basically you are facing the issue with transform and not the will-change because:
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