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

问题

I am testing this on Edge 20.10240.16384.0

I have an element whose position is fixed and has CSS Filters applied to it. This works great in all browsers except Microsoft Edge, where the position of the element doesn't remain fixed. This issue is directly related to CSS3 Filters as removing them makes the position fixed work correctly

Here is a basic example of this. It works correctly (aka the fixed background remains fixed) on browsers other than 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>

After searching around , I came across https://connect.microsoft.com/IE/feedback/details/1810480/ms-edge-rendering-problem-of-css-filter , which details the same issue but has been marked as Fixed most likely as it couldn't be reproduced. I am attaching GIF for the same -

Microsoft Edge -

Google Chrome -

回答1:

It is a bug, ms-edge-rendering-problem-of-css-filter, should have been fixed but obviously not.

Here is a workaround, where you still can use position: fixed and the image and filter is set using the :after pseudo-element.

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>

来源：https://stackoverflow.com/questions/35780409/position-fixed-not-working-when-css-filters-applied-on-same-element-in-microsoft

标签

css

microsoft-edge

css-filters