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:
html { height: 8000px; filter: invert(0.85);}div { position: fixed; top: 0; left: 0; bottom: 0; height: 100px; width: 100px; border: 1px solid black;}
<div></div>
Fixed position on a child element doesn't take the viewport as it's containing block when some properties are present on the parent element
Here's where the spec says it: https://www.w3.org/TR/css-transforms-1/#containing-block-for-all-descendants
I'm not aware of any listing of similar properties.
Related Topics
Make a Div Fill an Entire Table Cell
Add Footer Text in Each Page of Pdf Using CSS
Child Inside Parent With Min-Height: 100% Not Inheriting Height
How to Make Bootstrap Columns All the Same Height
Fixed Position But Relative to Container
Bootstrap Dropdown Sub Menu Missing
Css Force Image Resize and Keep Aspect Ratio
How to Style the ≪Option≫ With Only Css
Are Eot, Ttf, and Svg Still Necessary in the Font-Face Declaration
Why Don't :Before and :After Pseudo Elements Work With 'Img' Elements
Css Hover Drop Down Menu Disappears When Trying to Select Menu Option
How to Remove Border of Drop Down List:Css
Margin-Top Not Working For Span Element
How to Disable Text Selection Highlighting
Set Opacity of Background Image Without Affecting Child Elements
Select Every Nth Element in Css