Why does filter render differently in different browsers on the html and body tags?

It appears that this renders the same in all browsers here because it's rendered in an iframe. I have no idea why an iframe effects it, but nonetheless, here is the code:

<html>
  <head>
    <style>
      html {
        filter: invert(1);
      }
      body {
        background-color: white;
      }
    </style>
  </head>
  <body>
    <div>
    </div>
  </body>
</html>

For some reason if you load it in an iframe it will appear white no matter which browser you use, so testing it here doesn't work. If you save it in a file and load it on its own, it will appear white in FireFox but black in Chromium based browsers.

Why is it different in each browser, and why does it depend on iframes?

I think that the body should become black, on all browsers, whether or not it's in an iframe, right?

Why does filter render differently in different browsers on the html and body tags?

0 Answers