Firefox: How To Grayscale An Entire Page Without Breaking Fixed-positioned Elements?

Why do CSS filters, (ones that seem to have nothing to do with size/positioning) break your ability to give descendant-elements a fixed position? In addition to answering this ques

Solution 1:

You should not mess with the body/html when applying some styles because you will face a lot of unexpected result due to the nature of those elements.

Related question to see that you will face more issues than expected playing with filter on html: CSS filter:invert not working with background-color

You need to also consider propagation for some properties like overflow and background

Here is one idea to simulate your fixed element using position:sticky and considering an extra wrapper to avoid any kind of issue:

.html {
  min-height: 100vh;
  filter: grayscale(100%);
}

#box {
  background: red;
  color: white;
  border: solid #33333310px;
  padding: 5px;
  position: sticky;
  top: 50vh;
  left: 50%;
  transform: translate(-50%, -50%);
  /* the combination of float and transparent shape outside will make the element
     * shrink to fit
     * will not affect the other elements
  */float: left;
  shape-outside: linear-gradient(transparent, transparent);
}


/* to simulate content */.content {
  font-size: 40px;
}

body {
  margin: 0;
}

<divclass="html"><divid="box">Dead Center
  </div><divclass="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat eu ante sed lacinia. In sit amet sapien euismod nibh malesuada convallis pulvinar non mauris. Ut id felis posuere, pharetra justo eget, viverra lacus. Vestibulum tellus libero,
    euismod ac tellus vitae, dapibus mollis tellus. Donec ornare consectetur dui. Vestibulum iaculis neque leo, nec bibendum nisl consectetur in. Curabitur at viverra augue, ac semper neque.
  </div></div>

Solution 2:

What if you apply the filter to body > *? Less performant, but may solve this issue. I admit to not fully considering new issues it may raise, but I can't think of a scenario in which it would alter the containing block of second depth elements.

Solution 3:

In the spec it says

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. The list of functions are applied in the order provided.

So your fixed element with id box is being fixed to a new containing block and no longer fixed to the viewport. I also found this much more thorough answer by Temani Afif