Entire website (css-filter) is blurred in Webkit but not in Edge

Question

I am very new to the entire html/css-world so I'm making some very basic mistakes everywhere. Anyway, as a school project we are supposed to create a webpage about an imaginary gaming studio.

This is our project so far: https://github.com/giddorah/webpage

As you can see, the site works great and looks quite good (brag, brag) in Microsoft Edge... But for some reason Webkit-based browsers are blurring the entire page.

I just want the background to be blurred.

Can anybody see anything obvious I'm doing... Which I will explain with me being new to this.

Wait a second, you are asking us to ***install** (clone from repo)* a website in order to see it? Are you aware websites were invented and shaped around the concept of presenting content to visitors without them having to do anything else except browsing? Or have you skipped that lesson? I suggest you create a [mcve] of the issue you are discribing. Please see [ask] for advice on asking questions on SO. — tao, Feb 09 '17 at 23:24
Oh, no no. I had the page on Github so I thought it was a good and easy way for me to show you the code. — Johan Spånberg, Feb 10 '17 at 11:32

stalin · Accepted Answer · 2017-02-09T23:45:36.263

The problem is that you are applying the blur to the entire div.background this will apply to to all children, the best that you can do is just move the .hidden-scrollbar outside of background like this

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

Then add the next to the background

position: absolute;
top: 0;
left: 0;
right: 0;

UPDATE

Or you can also just add the background and animation in the :before pseudo class

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

Thank you! That really made the difference. Great explanation too. :) — Johan Spånberg, Feb 10 '17 at 11:33

Entire website (css-filter) is blurred in Webkit but not in Edge

1 Answers1