Transitioning backdrop-filter: blur on an element with "overflow: hidden" parent is not working

Question

I'm trying to apply a "fade-in/fade-out" transition to an absolute positioned div that has backdrop-filter: blur on it.
I have encountered some obstacles but I almost got it to work.

First off, backdrop-filter: blur is not animatable by default so, you have to animate the opacity of the element.
Then, since the parent of the element has overflow set to hidden, backdrop-filter is not working properly (at least in Chrome). It is possible to work around the issue following this (tl;dr; add a pseudo-element and apply the filter to that).

This two pieces though do not work combined, in fact, when the transition starts nothing happens until the amount of time specified in the duration is passed, then the filter is applied abruptly.

Is it possible to overcome this (ideally with just css)?

p {
  height: 400px;
}

.container {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid black;
  overflow: hidden;
  z-index: 1;
}

.overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 500ms ease;
  z-index: 2;
}

.overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(2px);
}

.container:hover .overlay {
  opacity: 1;
}

<div class="container">
  <p> Lorem ipsum dolor sit amet </p>
  <div class="overlay"></div>
</div>

score 2 · Accepted Answer · answered Mar 25 '22 at 14:45

2

You probably want the transitioning to happen on the pseudo element and move the opacity of that.

p {
  height: 400px;
}

.container {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid black;
  overflow: hidden;
  z-index: 1;
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 500ms ease;
}

.container:hover .overlay::after {
  opacity: 1;
}

<div class="container">
  <p> Lorem ipsum dolor sit amet </p>
  <div class="overlay"></div>
</div>

answered Mar 25 '22 at 14:45

A Haworth

30,908
4
11
14

Thank you! This is the correct answer. But, I still have some problems implementing it in my project. It is not working as expected (the blur is not shown until I mess about with the window. Resizing it, etc. then it appears). I may have made the wrong example on here leaving out some details (ie. the hidden overflow is set by javascript). I will try to come up with a more complete one in another question maybe. For now, may I ask if you know the reason why the one I posted wasn't working in the first place?) – mauro tenti Mar 25 '22 at 15:18

score 0 · Answer 2 · answered Mar 01 '23 at 02:45

0

backdrop-filter will not work if you change the opacity of that element or its parents. Once you change the opacity, you must force the browse to re-render or re-calculate CSS to make the filter work again.

answered Mar 01 '23 at 02:45

Zatana692

11
1

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/33943605) – Throvn Mar 04 '23 at 16:53

Transitioning backdrop-filter: blur on an element with "overflow: hidden" parent is not working

2 Answers2