0

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).

Andy_Jake
  • 134
  • 1
  • 11
  • @Temani Afif: I saw many related questions to this, it possibly may not be a duplicate. I am trying to apply the filter on the entire page (for creating an inverted view of the page). I also found that this has been fixed in chrome and still persist in Firefox (I saw that it is a feature as you mentioned in other responses). But, I am still not able to fix it for my case. Any pointers/hints on how to do this? – Andy_Jake Sep 25 '19 at 04:13
  • the only hint I can give you is the duplicate question that explain how filter affect element position which is by design. If you understand it, you will understand what is happening with your code and how you can avoid it. – Temani Afif Sep 25 '19 at 08:41

0 Answers0