2

I'm trying to blur the background whenever the hamburger menu is active. I'm using the CSS filter option and jQuery to add the class to the container's div. The effect applies, but every time it turns on/off, the content of the page move a few pixel to the left, then moves back to its initial position.

Here is the CSS:

.blurry-on{

   -webkit-filter: blur(5px);
   -moz-filter: blur(5px);
   -o-filter: blur(5px);
   -ms-filter: blur(5px);
   filter: blur(5px);

}

And this is jQuery part:

if($(this).hasClass('is-active')){
      $("#container-div").addClass("blurry-on");
}else{
      $("#container-div").removeClass("blurry-on");
}

Is there any way that to stop this movement? It seems like it is only happening in chrome. I tested in mozilla but this problem doesn't occur there.

u_mulder
  • 54,101
  • 5
  • 48
  • 64

0 Answers0