How to apply filters on entire html without affecting fixed positioned elements in Firefox

问题

I am trying to apply a filter on the entire webpage for creating an inverted view of the page. The page has fixed-positioned elements (some buttons and block). So the easiest way is to invert the color of each element on the webpage, including fixed position buttons. To invert the colors I use the following css code:

html {
    filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
    -webkit-filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
}

This works fine in chrome, but not in firefox. The inverting works but it changes the position of two buttons that are defined as follows:

#topbtn {
  display: none;
  position: fixed;
  width: 40px;
  height: 40px;
  overflow: hidden;
  outline:none;
  bottom: 20px;
  right: 20px;
  z-index: 99;
}

I have tried to change the filters but no luck. No error is shown. I know this may be duplicate of similar issues in Firefox. But, the other questions are mostly to deal with some div or some element inside another element.

IMO, this question is different as the filter applies to the entire page and I don't want to apply the filter to each element one-by-one too naive.

I hope someone has already encountered and solved the problem for Firefox (especially the dark mode theme guys).

来源：https://stackoverflow.com/questions/58089668/how-to-apply-filters-on-entire-html-without-affecting-fixed-positioned-elements