CSS滤镜模糊动画无法在Firefox正常工作

问题描述 投票：0回答：1

Original Intention

  • 点击一个按钮后，对画面中央的模式弹出，而原来的页面内容很好地模糊掉在后台运行。

Result

  • 一切都按预期工作中的铬和Safari浏览器，而在Firefox中赫然丑陋的方式模糊动画口吃。
  • 编辑：原来，这个问题不会影响Firefox的一致。我从转换到Mac的Windows和它神奇地运行后...

Tests & Research

  • 我不能在网上找到任何有价值的东西。据我了解，过滤模糊或者适用于其他开发商或没有。
  • 然后我意识到，当有只是一对夫妇的元素模糊不会出现这个问题。
  • 所以，我的理由，如果我申请过滤模糊与动画容器盛装页的原始内容，网页浏览器有很多要素的模糊。
  • 根据我的家庭测试，该问题影响的Mac，但在Windows上不会发生。我想这个问题可能来自整合穷人之间的Mac嵌入式图形芯片组与火狐？
  • 所有的一切，我已经构建了下面的测试案例。它显示了（我的Mac上），即铬和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>

Question/Request

  • 难道我错过了什么重要的吗？如何使过滤模糊动画在Firefox正常工作，对现代化的机器？ （参见结果部分EDIT）
css firefox css-animations blur
1个回答
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;
  }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.