¿La transición funciona con filtro de fondo?

Question

CSS transition no funciona en backdrop-filter si uso overflow:hidden en el elemento padre.

Código de ejemplo:

.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>

Video de ejemplo: https://take.ms/fo80F

javascript html css filter css-transitions

0

Delowar Hosain 23 jul. 2020 a las 17:45

Answer 1

La verdadera culpable parece ser la border-radius.

Suena como un error y no pude encontrar uno (aunque hay muchos relacionados ya que toda esta función de filtro de fondo todavía está llena de errores tanto en la implementación como en las especificaciones), por lo que es posible que desee informarlo directamente a los que pueden hacer algo al respecto.

Tenga en cuenta que una solución alternativa es usar una ruta de clip en lugar de este radio de borde:

.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>

1

Kaiido 24 jul. 2020 a las 03:36

Answer 2

Por un par de razones, sugeriría simplificar el código como se muestra a continuación. Creo que hace lo mismo que quieres y es más compatible con todos los navegadores, ya que Firefox actualmente no es compatible con 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>

-1

EvanMorrison 23 jul. 2020 a las 16:41

¿La transición funciona con filtro de fondo?

2 respuestas

Nuevas preguntas

javascript