2

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?

Mohammad Azhdari
  • 454
  • 6
  • 14

1 Answers1

1

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

Temani Afif
  • 245,468
  • 26
  • 309
  • 415