Tonald Drump
tengo un div.outer y dentro de un div.innerambos con position: absolute; y backdrop-filter: blur(8px);.
https://jsbin.com/nihakiqocu/1/edit?html,css,salida
Safari (izquierda) da el resultado deseado: ambos divs desenfocan lo que hay detrás de ellos.
Chrome (derecha), sin embargo, solo aplica el desenfoque de div.outer:
Tengo una solución: agregar otro div dentro div.outer y en movimiento backdrop-filter: blur(8px); a ese nuevo div.
Sin embargo, agradecería una solución que no requiera cambiar el DOM desde el primer jsbin. Además, ¿alguien sabe qué está causando esto? ¿Es un error de Chrome?
https://jsbin.com/rasudijame/1/edit?html,css,salida
PD: funciona en Chrome de iOS, pero no en Chrome de Android y tampoco en Chrome de Mac OS
Coloque el filtro de fondo en el pseudo elemento css. Esto permite filtros de fondo anidados. También puedes usar z-index: -1; para colocar su telón de fondo detrás de sus elementos
div {
height: 100px;
width: 100px;
}
.wrapper {
position: absolute;
}
.outer, .inner {
position: relative;
}
.outer::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.outer {
background: rgba(255, 0, 0, .5);
}
.inner::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.inner {
background: rgba(0, 0, 255, .5);
top: 50px;
left: 50px;
}
main {
position: relative;
}
<main>
<div class="wrapper">
<div class="outer">
<div class="inner"></div>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus in id quos, est voluptatibus minus porro sunt totam quod commodi odit maxime similique, dolorum aut quo atque. Deleniti, voluptas animi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus in id quos, est voluptatibus minus porro sunt totam quod commodi odit maxime similique, dolorum aut quo atque. Deleniti, voluptas animi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus in id quos, est voluptatibus minus porro sunt totam quod commodi odit maxime similique, dolorum aut quo atque. Deleniti, voluptas animi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus in id quos, est voluptatibus minus porro sunt totam quod commodi odit maxime similique, dolorum aut quo atque. Deleniti, voluptas animi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus in id quos, est voluptatibus minus porro sunt totam quod commodi odit maxime similique, dolorum aut quo atque. Deleniti, voluptas animi.</p>
</main>
y aquí está códec
-
Si esto no funciona para nadie, encontré que la solución para mí era reducir (o eliminar) el índice z de un elemento más bajo en la pila. No tengo idea de por qué, pero una capa de vidrio (z 1000) no funcionó con un hermano anterior (z 100), pero se solucionó reduciendo el hermano a z 10.
– Mike Stop continúa
19 abr 2021 a las 18:06
-
@MikeStopContinues, ¿puede explicarlo, por favor? ¡Me encontré con este problema!
– Sibidharan
15 de septiembre de 2021 a las 16:08
-
@Sibidharan Ha pasado mucho tiempo desde que abordé este problema, pero puedo decir esto: ahora uso dos encabezados fijos, uno para el efecto de filtro y otro para el contenido. Esto parece funcionar para mí. Algo como:
<header><div class="glass"/><nav /></header>. Haga que la posición del encabezado: fijo, haga que la posición de los niños: absoluta, y no debería tener problemas para que todo funcione.– Mike Stop continúa
17 de septiembre de 2021 a las 7:32
-
@MikeStopContinues Lo arreglé… todo bien 🙂 Tus respuestas ayudaron. Gracias.
– Sibidharan
17 de septiembre de 2021 a las 7:41
-
Tuve este problema y tomó mucho tiempo solucionarlo. En mi caso hubo dos culpables:
opacityydrop-shadow. Establecer la opacidad rompe el efecto de desenfoque, por lo que debería (al igual que en esta respuesta) usarrgba(r, g, b, *opacity here*). el segundo esdrop-shadow. Si el elemento que quería desenfocar también tuvieradrop-shadowagrega sombra pero el desenfoque desaparece. Espero que esto ayude.– alpersunter
3 de enero de 2022 a las 21:10
backdrop-filtertiene poco apoyo: Puedo usar.– Bestia Demonio
2 de abril de 2020 a las 18:18
¿Has probado a usar el
-webkit-¿prefijo?– Bestia Demonio
2 de abril de 2020 a las 18:19
Además, funciona bien en iOS Safari, Chrome y Firefox.
– Bestia Demonio
2 abr 2020 a las 18:21
Estoy usando tanto -webkit- como la versión normal. Curiosamente, funciona en Chrome de iOS, pero no en Chrome de Android y tampoco en Chrome de Mac OS (todas las versiones actuales, que deberían ser compatibles con el filtro de fondo, según caniuse)
– Tonald Drump
2 abr 2020 a las 18:40
Es un error rastreado en Chrome, consulte: bugs.chromium.org/p/chromium/issues/detail?id=993971
– Maometto
9 de junio de 2020 a las 16:18