2

I'm having issues with backdrop-filter in firefox, but only when one of the parent elements has a border-radius and an overflow style on it. has anyone seen this before? any workarounds?

heres a codepen i made that shows the issue: https://codepen.io/dbillings16/pen/WNKEBMg

thanks in advance

tried adding backdrop-filter: blur(10px); to a div, expecting it to blur the background. it is blurred in chrome, but not in firefox

drippydave16
  • 29
  • 1
  • 1
    Just a comment: it also seems to work if absolute rather than sticky position is used. Is there some stacking context problem? – A Haworth Jan 16 '23 at 19:03
  • @AHaworth That's what I'm thinking. It seems to work with anything other than sticky. Here's an example of a header with a blur on it using `fixed`, maybe OP can reformat their code to work similarly: https://codepen.io/jsonc/pen/VwbWRXY – AStombaugh Jan 16 '23 at 19:09
  • I had also noticed that sticky is part of the issue... unfortunately, i'm not able to use sticky, since i need it positioned relative to it's parent div, rather than the viewport – drippydave16 Jan 16 '23 at 20:37
  • Do you mean you can't use sticky? Possibly you meant fixed in that comment? – A Haworth Jan 16 '23 at 20:47
  • You are required to post a [mcve] here, **within your question**, and [not a link](https://meta.stackoverflow.com/a/254430/162698) to any other site. – Rob Jan 16 '23 at 23:10

0 Answers0