Actually the question is, does not work blur in firefox. link to the site , spread on the site for the reason that everything works fine on jsfiddle. Svg added, and confused 0. Maybe you will see what ...

img.bg { min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0; z-index: 1; } .blur_h { height: 70px; width: 100%; bottom: 0; left: 0; z-index: 2; position: absolute; filter: blur(10px); -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: url(#blur); overflow: hidden; } 
 <div class="blur_h"> <img class="bg" src="http://tsvg.ndv.ru/img/bg5.jpg"> </div> <img id="bg5" class="bg" src="http://tsvg.ndv.ru/img/bg5.jpg"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="blur"> <feGaussianBlur stdDeviation="5" /> </filter> </svg>

  • Inspector in FF says that "could not load the image", it seems he does not understand url type links (#blur) - Sergey Snegirev
  • And how can I fix it? - Syaskaa

1 answer 1

Browsers perceive the url (...) property differently without explicitly specifying the path.

If you duplicate styles with filters in <head> or add through the same jquery $('.blur').css('filter','url(#blur)'); , everything will work.

But when using ajax pjax and changing content with svg effects, you have to either update the style tag for the browser, or add it via javascript.

  • Oh, it worked. Thank you - Syaskaa