Html 整个网站（css过滤器）在Webkit中模糊，但在Edge中不模糊

我对整个html/css世界都很陌生，所以我到处都犯一些非常基本的错误。无论如何，作为一个学校项目，我们应该创建一个关于虚拟游戏工作室的网页

这是我们目前的项目：

正如你所看到的，该网站在微软的Edge中运行良好，看起来相当不错（吹牛，吹牛）。。。但由于某些原因，基于Webkit的浏览器正在模糊整个页面

我只想把背景弄模糊

---

有人能看到我在做什么吗。。。这一点我将解释为我是新手。

问题是，您正在将模糊应用于整个

div.background

这将应用于所有子项，您最好只需将

.hidden滚动条像这样移动到背景之外

<div class="background"></div>
<div class="hidden-scrollbar">....</div>

更新

或者您也可以在
：before
伪类中添加背景和动画

.background:before {
  content:"";
  -webkit-filter: blur(15px);
  -moz-filter: blur(15px);
  -o-filter: blur(15px);
  -ms-filter: blur(15px);
  filter: blur(15px);
  background: url(../img/newback.jpg) repeat-y;
  -webkit-animation: backgroundScroll 120s linear infinite;
  animation: backgroundScroll 120s linear infinite;
  width: 100vw;
  height: 100vh;
  position: fixed;
}
.background {
  width: 100vw;
  height: 100vh;
  top: -5%;
  left: -5%;
  z-index: 0;
}

等一下，您要求我们安装（从repo克隆）一个网站以便查看它？你是否知道网站是围绕着向访问者展示内容的概念而发明和形成的，而访问者除了浏览之外无需做任何其他事情？还是你跳过了那节课？我建议你对你所描述的问题做一个简单的描述。请参阅，以获取关于SO的问题的建议。哦，不，不。我在Github上有一个页面，因此我认为这是一个很好且简单的方式向您展示代码。谢谢！这确实起了作用。很好的解释。：）
.background:before {
  content:"";
  -webkit-filter: blur(15px);
  -moz-filter: blur(15px);
  -o-filter: blur(15px);
  -ms-filter: blur(15px);
  filter: blur(15px);
  background: url(../img/newback.jpg) repeat-y;
  -webkit-animation: backgroundScroll 120s linear infinite;
  animation: backgroundScroll 120s linear infinite;
  width: 100vw;
  height: 100vh;
  position: fixed;
}
.background {
  width: 100vw;
  height: 100vh;
  top: -5%;
  left: -5%;
  z-index: 0;
}