title: Why does applying a CSS-Filter on the parent break the child positioning?
body: <p>So I have this title-screen &quot;animation&quot; that has the title centered on a fullscreen page and when you scroll down it becomes smaller and remains at the top of the page. Here is a working example with the expected behavior, from which I stripped all unnecessary code to make it minimal:</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(window).scroll( () =&gt; {
      "use strict";
      let windowH = $(window).height();
      let windowS = $(window).scrollTop();
      let header  = $("#header").height(); 
      
      if (windowS &lt; windowH-header) {
          $("#title").css("transform", "scale("+(2-(windowS/($(document).outerHeight()-windowH))*2.7)+")");
          $("#header").css("transform", "translateY(0)");
          $("#inside, #content").css({
              "position": "static",
              "margin-top": 0
          });
      } else {
          $("#inside").css({
              "position": "fixed",
              "margin-top": -windowH+header
          });
          $("#content").css("margin-top", windowH);
      }
    
      $("#header").css("position", windowS &gt; (windowH-header)/2 ? "fixed" :"static");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.fixed {
      position: fixed!important;
  }
  .wrapper {
      width: 100%;
      text-align: center;
  }
  .wrapper:before {
      display: table;
      content: " ";
  }
  .wrapper:after {
      clear: both;
  }
  #inside {
      width: 100%;
      height: 100vh;
      background-color: lightcoral;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  #header {
      height: 90px;
      top: 0;
      position: sticky;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.5s;
  }
  #title {
      width: 100%;
      color: #fff;
      transform: scale(2);
  }
  #content {
      height: 1000px;
      background-color: lightblue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;body&gt;  
      &lt;div class="wrapper"&gt;
          &lt;div id="inside"&gt;
              &lt;div id="header"&gt;
                  &lt;h1 id="title"&gt;Title&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;div id="content"&gt;&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Next up is the exact same snippet but with one addition: I applied a filter, which is, as far as I'm concerned, purely cosmetic: <code>filter: brightness(1.3);</code>.</p>
  <p>As you can see below when you scroll half-way through the &quot;animation&quot; the title just disappears. When you inspect the element it still has all its properties but somehow it's gone. This is the same in Firefox and Chrome and I have no idea why. I would appreciate it a lot if someone could post a working snippet with the filter applied and explain why it didn't work before.</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(window).scroll( () =&gt; {
      "use strict";
      let windowH = $(window).height();
      let windowS = $(window).scrollTop();
      let header  = $("#header").height(); 
      
      if (windowS &lt; windowH-header) {
          $("#title").css("transform", "scale("+(2-(windowS/($(document).outerHeight()-windowH))*2.7)+")");
          $("#header").css("transform", "translateY(0)");
          $("#inside, #content").css({
              "position": "static",
              "margin-top": 0
          });
      } else {
          $("#inside").css({
              "position": "fixed",
              "margin-top": -windowH+header
          });
          $("#content").css("margin-top", windowH);
      }
    
      $("#header").css("position", windowS &gt; (windowH-header)/2 ? "fixed" :"static");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.fixed {
      position: fixed!important;
  }
  .wrapper {
      width: 100%;
      text-align: center;
  }
  .wrapper:before {
      display: table;
      content: " ";
  }
  .wrapper:after {
      clear: both;
  }
  #inside {
      width: 100%;
      height: 100vh;
      background-color: lightcoral;
      filter: brightness(1.3);        /*&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;*/
      display: flex;
      align-items: center;
      justify-content: center;
  }
  #header {
      height: 90px;
      top: 0;
      position: sticky;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.5s;
  }
  #title {
      width: 100%;
      color: #fff;
      transform: scale(2);
  }
  #content {
      height: 1000px;
      background-color: lightblue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;body&gt;  
      &lt;div class="wrapper"&gt;
          &lt;div id="inside"&gt;
              &lt;div id="header"&gt;
                  &lt;h1 id="title"&gt;Title&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;div id="content"&gt;&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>