Question 73878 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Backdrop-filter blur not resizing when changing window size – Reactjs

I have the following code to apply a blur backdrop-filter on a background image:

<div className="container">
    <div className="blur" />
      <div className="box">
        <h2>Start editing to see some magic happen!</h2>
      </div>
</div>

CSS:

.container {
  height: 100vh;
  width: 100vw;
}

.blur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.blur::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);
}

It seems to work well until a resize the window, the filter will not resize like the background-image. I tried changing the parent div to position: relative but it didn’t work either

https://codesandbox.io/s/snowy-tdd-b5u8ed?file=/src/App.js

enter image description here

Tags:

6

Answers


  1. Chosen as BEST ANSWER
    0

    I resorted to using the following code for now in case anybody is wondering

    .blur {
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: url("https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(60px);
    backdrop-filter: blur(60px);
    scale: 1.1 !important; // to hide white border when using blur filter
    transform: translate3d(0,0,0); // enable 3d acceleration on safari
}

  2. 0

    ::before is not a good option for this. You’re better off applying filter:blur to the image itself.

    .container {
  height: 100vh;
  width: 100vw;
}

.blur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: blur(60px);
  backdrop-filter: blur(60px);
}
    Login or Signup to reply.
  3. 0

    It seems to be a WebKit issue, as it does work fine for me in Firefox. I kinda solved it by making the blurred div a really big size so it always covers the entire screen. This does however seem to cause some small artifacts like flickering in Firefox.

    Login or Signup to reply.
  4. 0

    This will apparently be fixed in Chrome 112 (currently beta now stable).

    I could reproduce the problem in Chrome 110 and 111, but not in 112, nor 113. Tested under MacOS.

    The release date of Chrome 112 was March 29, 2023. See https://chromestatus.com/roadmap

    So I guess, for some developers the correct answer is "just wait".

    Login or Signup to reply.
  5. 0

    The fix for now, is to just add this extra style to the same class/ID that the backdrop-filter is on.

    Works perfectly for me.

    filter: blur(0);

    Example:

    .blur-section {
    width: 100%;
    backdrop-filter: blur(12px);
    filter: blur(0);
}
    Login or Signup to reply.
  6. 0

    adding another filter with a size of 0 will fix this issue

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search