Javascript 当汉堡包菜单被扩展时，当使用css模糊使背景模糊时，如何修复chrome错误？

每当汉堡包菜单激活时，我都试图模糊背景。 我使用CSS过滤器选项和jQuery将类添加到容器的div中。这种效果适用，但每次打开/关闭时，页面内容都会向左移动几个像素，然后移回其初始位置

以下是CSS：

.blurry-on{

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

}

这是jQuery的一部分：

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

---

有没有办法阻止这场运动？这似乎只发生在chrome上。我在mozilla中进行了测试，但在那里没有出现这个问题

您可以创建一个代码片段或小提琴来显示问题。