css - CSS滤镜模糊动画在Firefox中无法正常运行 - Thinbug

CSS滤镜模糊动画在Firefox中无法正常运行

时间：2019-02-09 09:40:06

标签： css firefox css-animations blur

原意

单击按钮后，在屏幕中央弹出一个模态弹出窗口，同时原始页面内容在背景中清晰模糊。

结果

一切在Chromium和Safari中都可以正常工作，而模糊动画在Firefox中却以非常难看的方式停顿。
编辑：事实证明，该问题不会持续影响Firefox。我从Mac切换到Windows，然后在Windows上神奇地运行...

测试与研究

我在网络上找不到任何有价值的东西。据我了解，过滤器模糊要么对其他开发人员有效，要么不起作用。
然后我意识到当只有几个元素要模糊时，不会发生此问题。
所以我的理由是，如果我将带有动画的滤镜模糊应用于保存页面原始内容的容器，则Web浏览器中有很多要模糊的元素。
基于我的家庭测试，该问题影响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 :(得分：0)

您可以尝试

.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;
  }