Estoy tratando de lograr un efecto similar al archivo adjunto de fondo fijo. Puedo obtener el resultado que quiero con clip-path o -webkit-mask-image , sin embargo, en Chrome a veces la imagen fija se oculta cuando está fuera de la vista y cuando me desplazo hacia atrás, no aparece hasta que seleccione algo o cambiar el ancho del navegador. He probado esto en Firefox y Edge y ambos estaban bien.
Quiero saber cuál es el problema y si hay alguna forma de solucionarlo.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Issue</title> <style> .parent { position: relative; width: 500px; height: 200px; background: lightcoral; clip-path: inset(0); box-sizing: border-box; } .child { position: fixed; top: 0; width: 100%; height: 100%; background-image: url("https://picsum.photos/800/400"); } .filler { width: 100%; min-height: 2000px; } </style> </head> <body> <div class="parent"> <span class="child"></span> </div> <div class="filler"></div> </body> </html>Además de usar position: fixed en su elemento secundario, también debe aplicar background-attachment: fixed . Ambos estilos son necesarios.
Pasé por un proceso doloroso de intentar que clip:rect funcionara hace unos meses, con el mismo problema que estás experimentando (entiendo que no estás usando clip:rect ). El problema subyacente era que, al volver a cargar la página, si el área clip:rect no estaba actualmente a la vista, el contenido dentro de él no se representaría.
Cambiar el tamaño de mi pantalla o apagar y volver a encender un estilo en el panel del desarrollador volvería a representar mis imágenes correctamente, pero no era una solución, solo evidencia del problema.
Para mí, la solución con clip:rect estaba en el uso del estilo de position en los contenidos dentro del elemento clip:rect . Inicialmente estaba usando el posicionamiento relative , pero necesitaba ser fixed o absolute .
Verifique qué posición está usando y vea si esto ayuda.
En una nota adicional, y también muy frustrante, el navegador en el que probé esto en ese momento era Chrome, móvil y de escritorio. Lo hice funcionar muy bien una vez que terminé el desarrollo y lo probé a fondo. Hoy, irónicamente, el único navegador que no funciona con el contenido de mi clip:rect es Chrome de escritorio.
Esto debe haber sido una actualización reciente de Chrome de escritorio... de vuelta a la mesa de dibujo.