When `position: fixed;` is not working.

Hello, This is my first posting :)

If a parent elements has transform properties, position: fixed; of children elements does not be working.

That case, The children elements behave like position: absolute;.

Solution to the problem

If a parent elements uses transform animation, Replace without transform animation. or Remove transform properties or Set transform: none;.

Comments

[MwauraMuchiri]

Also if the parent element has a " will-change: transform; " attribute, the fixed child element will be relative to the parent

[Mauro Nava]

Also, if the parent element is using the perspective attribute, the fixed postion will not work in the child.

[Armin Tor]

Big experience to me :) Thanks.

[Kevin AS]

THANKS A LOT

[Adam Leszczyński]

omg dude, thanks a lot, I would never have guessed : D

[kamcio]

Also, if the parent element has a contain attr with a value set to content, layout, paint or strict than it will not work.

[pingzoo]

Thanks... That was the solution :D

[Temani Afif]

related for more details: stackoverflow.com/a/52937920/8620333

[Dr. Derek Austin 🥳]

Solid, thanks Takaaki

[Frabatx]

Also, if the parent is using backdrop-filter: blur().
I spent 3 days on in

[capanovitch23]

Absolute lifesaver bro thank you