CODEWITHSUNDEEP
javascripthtmlcssfiltercss-transitions
Delowar Hosain
Delowar Hosain

Reputation: 2359

Does transition work with backdrop-filter?

CSS transition is not working on backdrop-filter if I use overflow:hidden on parent element.

Example code:

.image-wrapper {
   width: 200px;
   border-radius: 6px;
   position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(0px);
  transition-duration: .5s;
}

.image-wrapper:hover .overlay {
  backdrop-filter: blur(15px);
}

.image-wrapper img {
  max-width: 100%;
  height: auto;
}
<h4>// overflow:hidden (transition not working)</h4>
<div class="image-wrapper" style="overflow: hidden">
  <img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
  <div class="overlay"></div>
</div>

<h4>// overflow:visible</h4>
<div class="image-wrapper">
  <img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
  <div class="overlay"></div>
</div>

Example video: https://take.ms/fo80F

Upvotes: 1

Views: 2342

Answers (2)

Kaiido
Kaiido

Reputation: 136638

The real culprit seems to be the border-radius.

Sounds like a bug and I couldn't find one (though there are many related since this whole background-filter feature is still full of bugs both in the implementation and the specs), so you might want to report it directly to the ones that can do something about it.

Note that a workaround is to use a clip-path instead of this border-radius:

.image-wrapper {
  width: 200px;
  position: relative;
  line-height: 0
}
.clip-me {
  clip-path: inset(0px 0px round 6px 6px);
}
  
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(0px);
  transition-duration: .5s;
}

.image-wrapper:hover .overlay {
  backdrop-filter: blur(15px);
}

.image-wrapper img {
  max-width: 100%;
  height: auto;
}
<h4>// overflow:hidden (transition working but overflow is now useless)</h4>
<div class="image-wrapper clip-me" style="overflow: hidden;">
  <img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
  <div class="overlay"></div>
</div>

<h4>// overflow:visible</h4>
<div class="image-wrapper">
  <img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
  <div class="overlay"></div>
</div>

Upvotes: 1

EvanMorrison
EvanMorrison

Reputation: 1217

For a couple of reasons I would suggest simplifying the code as shown below. I believe it does the same thing you want and is more cross-browser compatible -- as Firefox doesn't currently support backdrop-filter.

.image-wrapper {
   width: 200px;
   border-radius: 6px;
   position: relative;
}

.image-wrapper img {
  max-width: 100%;
  height: auto;
  filter: blur(0);
  transition-duration: .5s;
}

.image-wrapper img:hover {
  filter: blur(15px);
}
<h4>// overflow:hidden (transition is now working)</h4>
<div class="image-wrapper" style="overflow: hidden">
  <img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
</div>

<h4>// overflow:visible</h4>
<div class="image-wrapper">
  <img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
</div>

Upvotes: 1

Related Questions