Filter:blur() 适用于 Chrome 但不适用于 Firefox答案

【问题标题】：Filter:blur() working in Chrome but not FirefoxFilter:blur() 适用于 Chrome 但不适用于 Firefox
【发布时间】：2023-07-11 19:59:01
【问题描述】：

我想在滚动时模糊一个图像。我已经让它在 Chrome 中运行良好，但在 Firefox 中它似乎移动了......

https://jsfiddle.net/p88hy7wn/

我正在使用$window.scroll 并具有以下应用过滤器...

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

有人知道发生了什么吗？

【问题讨论】：

标签： javascript jquery css firefox

【解决方案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

但是延迟是由 background-attachment:fixed 触发的；在Mozilla。其他前缀如 transform 正在删除 background-attachment: fixed;完全地。

   -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

上面链接的解决方法也不好用^^不知道为什么

也许您应该选择另一种视差解决方案。

【讨论】：

抱歉错过了一些东西
我看到 1 秒。我有解决办法。我的回答没有更新 mb
感谢您的努力并输入@Traver - 我会读一读，谢谢！
有趣的是，如果您完全删除 javascript，它又会再次滞后。即使有模糊和背景附加。这个问题太有趣了

【解决方案2】：

试试这个

.header-promo .img {
    height: 100%;
    background-position: 10px;
    width: 100%;
    position: absolute;
    background-size: auto 100%;
    background-attachment: fixed;
    background-position: 50% 50%;
    -moz-backface-visibility: hidden;
    -moz-transform: translateZ(0) scale(1.0, 1.0);
}

【讨论】：