CSS анимация размытия фильтра не работает правильно в Firefox - PullRequest
Новая
       12

CSS анимация размытия фильтра не работает правильно в Firefox

0 голосов
/ 09 февраля 2019

Исходное намерение

  • После нажатия кнопки установите модальное всплывающее окно в центре экрана, в то время как исходное содержимое страницы приятно размывается в фоновом режиме.

Результат

  • Все работает, как задумано, в Chromium и Safari, в то время как анимация размытия запинается ужасно уродливо в Firefox.

  • РЕДАКТИРОВАТЬ:Оказалось, что проблема не влияет на Firefox последовательно.Я переключился с Mac на Windows, и на последнем он волшебным образом работает ...

Тесты и исследования

  • Я не смог ничего найтизначения в Интернете.Как я понимаю, фильтр размытия либо работает для других разработчиков, либо нет.

  • И тогда я понимаю, что эта проблема не возникает, когда размытие имеет только пару элементов.

  • Поэтому я полагаю, что если применить фильтр размытия с анимацией к контейнеру, содержащему исходное содержимое страницы, в веб-браузере будет много элементов для размытия.

  • Судя по моим домашним тестам, проблема касается Mac, но не возникает в Windows.Я считаю, что проблема может быть связана с плохой интеграцией между встроенным графическим чипсетом Mac и Firefox?

  • В целом, я построил приведенный ниже тестовый пример.Это показывает (на моем Mac), что Chromium и Safari быстро анимируют фильтр размытия, в то время как Firefox заикается и показывает крайне неприятную производительность. 

<html>
<style>
  div#divContainer {
    display: flex;
    flex-wrap: wrap;
  }

  div.toBeBlurred {
    height: 50px;
    width: 50px;
    margin: 5px;
    background-color: crimson;
  }

  .blurred {
    filter: blur(25px);
    transition-duration: 2s;
  }
</style>

<script>
  window.onload = function () {
    var btn = document.getElementById("applyBlurButton");
    var divContainer = document.getElementById("divContainer")

    btn.onclick = applyBlur;

    for (var i = 0; i < 200; i++) {
      newDiv = document.createElement("div");
      newDiv.classList.add("toBeBlurred")
      divContainer.appendChild(newDiv)
    }
  }


  function applyBlur() {
    divContainer.classList.add('blurred');
  }
</script>

<body>
  <button id="applyBlurButton">Apply Blur!</button>
  <div id="divContainer">

  </div>
</body>

</html>

Вопрос / Запрос

  • Я что-то здесь упускаю?Как сделать так, чтобы анимация размытия фильтров работала корректно в Firefox на современных машинах?(см. РЕДАКТИРОВАТЬ в Результат раздел)

1 Ответ

0 голосов
/ 09 февраля 2019

Вы можете попробовать это 

.blurred {
  // Browser Specific
    -webkit-filter: blur(25px);
    -moz-filter: blur(25px);
    -o-filter: blur(25px);
    -ms-filter: blur(25px);
    filter: blur(25px);
    transition-duration: 2s;
  }
...