Question

我在Edge 20.10240.16384.0

上测试了这个

我有一个元素，其位置是固定的，并且应用了CSS滤镜。这适用于除Microsoft Edge之外的所有浏览器，其中元素的位置不会保持固定。此问题与CSS3过滤器直接相关，因为删除它们可以使位置固定正常工作

这是一个基本的例子。它在Microsoft Edge以外的浏览器上正常工作（也就是固定背景保持固定）。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      height: 5000px;
    }
    
    .fixed {
      position: fixed;
      left: 0;
      background-image: url(https://lh5.googleusercontent.com/-REJ8pezTyCQ/SDlvLzhAH-I/AAAAAAAABeQ/mC1PXNiheJU/s800/Blog_background_750.gif);
      background-repeat: repeat;
      background-attachment: fixed;
      height: 100%;
      width: 100%;
      -webkit-filter: brightness(70%);
      -moz-filter: brightness(70%);
      -o-filter: brightness(70%);
      filter: brightness(70%);
    }
  </style>
</head>

<body>
  <div class='fixed'></div>
</body>

</html>

＆＃13;

在搜索之后，我遇到了https://connect.microsoft.com/IE/feedback/details/1810480/ms-edge-rendering-problem-of-css-filter，它详细说明了相同的问题，但最有可能被标记为固定，因为它无法复制。我正在附加GIF -

Microsoft Edge -

Google Chrome -

Answer 1

这是一个错误ms-edge-rendering-problem-of-css-filter，应该已修复，但显然不是。

这是一种解决方法，您仍然可以使用position: fixed，并使用:after伪元素设置图像和过滤器。

body {
  height: 5000px;
}

.fixed {
  position: fixed;
  left: 0;
  height: 100%;
  width: 100%;
}
.fixed:after {
  content: ' ';
  position: absolute;
  left:0;
  top: 0;
  height: 100%;
  width: 100%;
  background-image: url(https://lh5.googleusercontent.com/-REJ8pezTyCQ/SDlvLzhAH-I/AAAAAAAABeQ/mC1PXNiheJU/s800/Blog_background_750.gif);
  background-repeat: repeat;
  background-attachment: fixed;
  -webkit-filter: brightness(70%);
  -moz-filter: brightness(70%);
  -o-filter: brightness(70%);
  filter: brightness(70%);
}

<div class='fixed'></div>

当CSS过滤器应用于Microsoft Edge中的同一元素时，位置固定不起作用

1 个答案: