2

As you can see by running the below example, applying a filter to a parent element has a bizarre side-effect: 1. Any child with position: fixed acts like it has position: absolute. 2. The parent acts like it has position:relative even though the parent is just default static positioned.

Why is this the case? There's nothing about this in the MDN filter docs. And it doesn't matter what filter function you use - just using that rule makes this behavior happen.

The only guess I have here is that using a filter-function is creating a new stacking context for the element and it's decendents, but that seems like strange behavior, and that isn't documented anywhere.

.parent {
  padding: 10px;
  margin: 5px;
  outline: 1px solid gray;
}
.parent-with-filter {
  filter: contrast(1);
}
.child {
  background: hsla(100, 100%, 80%, .6);
  padding: 0px;
  outline: 1px solid red;
  position: fixed;
  top: 25px;
  right: 30px;
  opacity: .7;
}
<div class="parent">
  <p>Box 1</p>
  <div class="child">
    <p>I am child 1.</p>
  </div>
</div>
<div class="parent">
  <p>Box 2</p>
  <div class="child">
    <p>I am child 2.</p>
  </div>
</div>
<div class="parent">
  <p>Box 3</p>
  <div class="child">
    <p>I am child 3.</p>
  </div>
</div>

<div class="parent parent-with-filter">
  <p>Box 4 with filter</p>
  <div class="child">
    <p>I am child 4.`</p>
  </div>
</div>
JakeParis
  • 11,056
  • 3
  • 42
  • 65
  • MDN gives a rough overview of functionalities, but always also links to the specification [Filter Effects Module Level 1: 5. Graphic filters: the filter property](https://www.w3.org/TR/filter-effects-1/#FilterProperty) , and there you 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.[…]` So you always should follow the links to the specs for more details. – t.niese May 14 '20 at 19:01

0 Answers0