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

Question

我正在 Edge 20.10240.16384.0 上测试这个

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

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

<!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>

四处搜索后，我遇到了 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 中的同一元素时，位置固定不起作用

Position Fixed not working when CSS Filters applied on same element in Microsoft Edge

css

css-filters

microsoft-edge