Question

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

我正在使用$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触发的：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

上面链接的解决方案不能正常工作^^不确定原因

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

Answer 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);
}

过滤：blur（）在Chrome中运行但不在Firefox中运行

2 个答案: