0

I have included a fixed element in a scrollable list for which the following CSS rule applies:

.frosty {
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

At first glance, the effect works fine. However, as I am starting to move the content behind it, the background of the fixed element does not change.

Usually, content behind the fixed element would bleed through it, appearing as if it was frosted glass or similar. Could it be that React is preventing a re-rendering in some way? How could I fix it?

It does update whenever I resize my window.

enter image description here

Here's a minimal example. You can scroll the red, green and blue blocks behind the frosted and clear elements. The frosted one will not update.

Codepen

Double M
  • 1,449
  • 1
  • 12
  • 29

1 Answers1

0

Back-drop is not a static effect. The effect applies to anything underneath (backdrop) dynamically. There is react npm package library which support backdrop-filter effect. It would be flexible

https://www.npmjs.com/package/react-backdrop-filter

js-expert
  • 17
  • 3
  • How is it, though, that React hinders the effect? After all it's just HTML and CSS being rendered by the browser, I would not expect anything like this to happen. – Double M Mar 11 '19 at 14:28
  • I didn't mean that react hinders the effect. Using react npm package would be more compatible with your project. So I suggest you to use react-backdrop-filter. – js-expert Mar 11 '19 at 19:12
  • Ah I see. Thanks for the hint, but that doesn't exactly answer the question. I am aware that `backdrop-filter` has limited compatibility, that's okay. – Double M Mar 12 '19 at 17:31
  • That is it. You got it! – js-expert Mar 12 '19 at 21:25