Why Does Applying a Css-Filter on the Parent Break the Child Positioning

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

If we refer to the specification we can read:

A value other than none for the filter property results in the
creation of a containing block for absolute and fixed positioned
descendants unless the element it applies to is a document root
element in the current browsing context. The list of functions are
applied in the order provided.

This means that your position:fixed element will be positioned relatively to the filtered container and no more the viewport. In other words, it's still fixed but inside its new containing block (the filtered container)

Here is a simplified version to illustrate the issue:

.container {
display: inline-block;
width: 200px;
height: 200vh;
border: 1px solid;
}

.container>div {
position: fixed;
width: 100px;
height: 100px;
background: red;
color: #fff;
}
<div class="container">
<div>I am fixed on scroll</div>
</div>

<div class="container" style="filter:grayscale(1);">
<div>I move with the scroll</div>
</div>

CSS 'backdrop-filter' on parent div messes with child div's height and width when using 'position: fixed'

This question has already been asked

https://stackoverflow.com/a/52937920/15859431

This means that your position:fixed element will be positioned relatively to the filtered container and no more the viewport

A value other than none for the filter property results in the
creation of a containing block for absolute and fixed positioned
descendants unless the element it applies to is a document root
element in the current browsing context. The list of functions are
applied in the order provided.

CSS Filter invert rule breaking fixed position on Chrome 68

It looks like a bug on Google Chrome 68, but you can solve this using the <html> element instead of the <body> element: