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-changeshould do the same and since the.parentis 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-changeproperty or change its value from.parent