Filter:blur() working in Chrome but not Firefox

Question

I have an image I want to blur on scroll. I've got it working fine in Chrome but in Firefox it seems to move...

I'm using $window.scroll and have the following to apply the filter...

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

Anybody have an idea of what's happening?

http://css-plus.com/2010/05/how-to-add-a-gaussian-blur-effect-to-elements-within-firefox/ — Osama, Apr 26 '17 at 14:50

score 2 · Answer 1 · edited May 23 '17 at 12:17

2

I need to update my answer completely. Your problem is not the blur filter. It is working fine. For better improvement for blur you can add

   -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

But the lagg is triggered by the background-attachment: fixed; in mozilla. Other Prefixes like transform are removing the background-attachment: fixed; completely.

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

I am trying to figure out why

Some Links if you wanna help searching:

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

The solution of the link above is not working as well^^ not sure why

Maybe you should just go with another solution of parallax.

edited May 23 '17 at 12:17

Community

1
1

answered Apr 26 '17 at 14:52

RacoonOnMoon

1,556
14
29

Sry missed something – RacoonOnMoon Apr 26 '17 at 14:54
1

I see 1 sec. I have the solution. My answer didn't update mb – RacoonOnMoon Apr 27 '17 at 10:14
Appreciate the effort and input @Traver - I'll have a read, thanks! – Liam Apr 27 '17 at 11:30
The funny thing is if you remove the javascript completely its's lagging again. even with blur and background-attachement. The question is damn intresting – RacoonOnMoon Apr 27 '17 at 11:50

score 1 · Answer 2 · answered Apr 26 '17 at 14:47

Try this

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

Filter:blur() working in Chrome but not Firefox

2 Answers2