position: fixed works like position: absolute in Firefox when using CSS filter

Question

I have read the above question and it works fine on position: absolute using CSS filter in Firefox. But position: fixed using CSS filter is still not as expected. position: fixed using CSS filter in Firefox works like position: absolute, like below:

html {
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
    height: 100%;
}

img{
    position: fixed;
    bottom: 10px;
    right: 10px;
}

div {
  margin-top: 10000px;
}

<img src="https://www.google.com/images/srpr/logo3w.png">

<div id="b">The end.</div>

Could anyone solve this problem?

Does this answer your question? [CSS-Filter on parent breaks child positioning](https://stackoverflow.com/questions/52937708/css-filter-on-parent-breaks-child-positioning) — leonheess, Jan 26 '20 at 13:52

score 0 · Accepted Answer · answered May 08 '17 at 17:03

Seems to work if you don't apply the filter to html and just apply it to the image. Or if you want to apply this to multiple items, wrap them in an element and apply the filter/positioning to the wrapper.

body {
  min-height: 500vh;
}

img {
  -moz-filter: grayscale(100%);
  filter: grayscale(100%);
  position: fixed;
  bottom: 0;
  right: 0;
}

<img src="https://www.google.com/images/srpr/logo3w.png">

position: fixed works like position: absolute in Firefox when using CSS filter

1 Answers1