Filter property doesn't form containing block (Chrome BUG)

by Konstantin Rouda

HTML

<div class="container">
  <div class="child"></div>
</div>

CSS

* {
  box-sizing: border-box;
}

.container {
  width: 500px;
  height: 500px;
  margin: 20% auto 0;
  border: 5px solid cornflowerblue;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
}

.child {
  position: fixed;
  left: 0; top: 5%;
  width: 200px;
  height: 200px;
  background: firebrick;
}

JavaScript

/*

Steps to reproduce the problem:
1. create container HTML element with `filter` property other than none.
2. inside this container add child element with `position:fixed`, `left` property set to 0 and `top` property set to 10%.


What is the expected behavior?
HTML element with the `filter` property set to any value other than none should form containing block for the child element with `position: fixed;`.


What went wrong?
HTML element with `filter` property doesn't form containing block for the child element with `position: fixed;`.

link to MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block

*/