Why does applying a CSS-Filter on the parent break the child positioning?

Question

So I have this title-screen "animation" that has the title centered on a fullscreen page and when you scroll down it becomes smaller and remains at the top of the

Answer 1

in order to avoid hard maintenance and different implementation for each browser you can use a recursive tree traversal function which marks the position 'fixed' nodes and then apply the needed filter properly without destroying the positions.

I used this code in order to apply the 'filter invert' property globally, without hard-coding it to specific parent elements.