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

If you want to blur or grayscale the entire page except one element, just use backdrop-filter instead of filter. At the time of writing Firefox just needs to ship it by default.

Not working:

    


    
I am not blurred

    
    

        

    

Working:

    


    
I am not blurred