title: CSS filter:invert not working with background-color
body: <p>I have the following CSS applied to the <code>&lt;html&gt;</code> tag: <code>filter: invert(1);</code></p>
  
  <p>All elements get inverted even <code>background-color</code> of elements, (Chrome v80)</p>
  
  <p>Once I try the same on Safari iOS 13 / Safari MacOS, every element get inverted except for &lt;html>'s <code>background-color</code></p>
  
  <p>CSS filter property is supported for all browsers I'm running: </p>
  
  <p><a href="https://caniuse.com/#feat=mdn-css_properties_filter" rel="noreferrer">https://caniuse.com/#feat=mdn-css_properties_filter</a>. </p>
  
  <p>Could someone explain this behavior?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    filter: invert(1);
    /* this background-color does not change on ios+other browsers */
    background: #fff;
    padding: 50px;
  }
  
  body {
    background-color: #0000ff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }
  
  .text {
    text-align: center;
    color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="text"&gt;
    If it works: color should not be red, background should not be blue
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>