【问题标题】: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);
}

【讨论】: