Question

Firefox position bug by parent with "filter"

我已经阅读了上述问题，并且在position: absolute使用Firefox中的CSS过滤器时效果很好。但是position: fixed使用CSS过滤器仍然不如预期。 position: fixed在Firefox中使用CSS过滤器的工作方式与position: absolute类似，如下所示：

＆＃13;

html {
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
    height: 100%;
}

img{
    position: fixed;
    bottom: 10px;
    right: 10px;
}

div {
  margin-top: 10000px;
}

＆＃13;

<img src="https://www.google.com/images/srpr/logo3w.png">

<div id="b">The end.</div>

＆＃13;

有人能解决这个问题吗？

Answer 1

如果您不将filter应用于html并将其应用于图片，则似乎可以正常工作。或者，如果要将其应用于多个项目，请将它们包装在元素中，并将过滤器/定位应用于包装器。

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工作就像position：在使用CSS过滤器时在Firefox中绝对

1 个答案: