Подтвердить что ты не робот

Позиция Исправлена ​​ошибка, когда CSS-фильтры применялись к одному элементу в Microsoft Edge

Я тестирую это на 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>
4b9b3361

ОТВЕТЫ

Ответ 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>