javascript - 过滤器 :blur() working in Chrome but not Firefox

Question

我有一张图片想在滚动时进行模糊处理。我在 Chrome 中运行良好，但在 Firefox 中它似乎在移动......

https://jsfiddle.net/p88hy7wn/

我正在使用 $window.scroll 并使用以下内容来应用过滤器...

$parallaxElement.css({
    'filter' : 'blur('+blurValue+'px)',
    '-webkit-filter' : 'blur('+blurValue+'px)',
    '-moz-filter' : 'blur('+blurValue+'px)'
});

有人知道发生了什么事吗？

Answer 1

我需要完全更新我的答案。您的问题不是模糊滤镜。它工作正常。为了更好地改进模糊，您可以添加

   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000

但是 lagg 是由 background-attachment 触发的:已修复；在莫斯拉。其他前缀如 transform 正在删除背景附件:已修复；完全地。

   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);

我想知道为什么

一些链接，如果你想帮助搜索:

Fixed attachment background image flicker/disappear in chrome when coupled with a css transform

上面链接的解决方案也不起作用^^不知道为什么

也许您应该采用另一种视差解决方案。