sombras extremadamente lentas de CSS3 en Chrome

He estado desarrollando una aplicación específica para navegadores modernos y he usado mucho la propiedad box-shadow.sombras extremadamente lentas de CSS3 en Chrome

Hasta hace poco, esto ha sido absolutamente bueno en todos los navegadores compatibles. Sin embargo, hace aproximadamente un mes, cuando probaba en Chrome, noté que el desplazamiento era "extremadamente" lento, hasta el punto de ser casi inutilizable.

Durante el último mes he intentado arrancar guiones/jugar con mi estructura html, todo lo que se puede pensar hasta que finalmente hoy he encontrado la causa.

Con box-shadow/webkit-box-shadow desactivado en todos los elementos que tenía configurados, el problema desaparece.

Lo que me parece extraño es que funcionó bien en Chrome hasta hace aproximadamente un mes. Por cierto, el desplazamiento en la versión de Windows del safari está bien, aunque un poco más lento que IE/Opera y Firefox.

¿Es esto un problema conocido? ¿Alguien tiene una solución para esto?

Y lo más importante, ¿hay algún otro método para reproducir el mismo efecto sin utilizar la propiedad CSS3?

Fuente

2012-01-24 gordyr

no puedo hablar con el problema específico, pero son conocidos y documentados para frenar la renderización de páginas efectos CSS3. En cuanto a la replicación del efecto, ¿podría darnos una muestra de cómo está utilizando la sombra para que podamos ayudarlo a encontrar una respuesta? –

De hecho, parece tan extraño que estuvo bien hasta hace poco, sin agregar nuevas sombras de cuadros. Independientemente. Lo estoy usando simplemente para agregar sombras menores alrededor de los elementos con el fin de dar un efecto 3D. No estoy usando el efecto para simular algo para lo que no fue diseñado. La mayoría del uso está entre 4px-10px radio alrededor del borde. La única dificultad es que estos 'elementos de contenedor son de tamaño dinámico ya que el contenido puede agregarse/eliminarse. Curiosamente, solo es el desplazamiento el que tiene el problema, todos los demás repintados/reflujos parecen estar bien – gordyr

Yah, aún más interesante es este hilo de hace un año RE: safari: http://stackoverflow.com/questions/4789853/css3-box -shadow-causes-scroll-lag-slow-performance-on-safari-5-0-2 Una cosa que recuerdo es que tanto el radio de la sombra como el número de sombras lo ralentizan. Lo siento, pero no tengo una solución. –

hubo un informe de error abre y se cierra en Webkit año pasado:

CSS3 box-shadow causes scroll-lag (slow performance) on Safari 5.0.2?

Parece Chrome tiene un error accesible en una versión anterior:

http://code.google.com/p/chromium/issues/detail?id=95164

Airbnb discutió la problema recientemente, y realmente cambió su diseño final debido a él:

http://nerds.airbnb.com/box-shadows-are-expensive-to-paint

Recientemente, un grupo de personas ha estado interesado en probar programáticamente el rendimiento de CSS.Aquí hay un bookmarklet que puede utilizar para iniciar sus propias pruebas:

http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling

Mientras tanto, tienes razón en que la frontera imagen piratería es una opción. Échale un vistazo aquí:

Scroll Lag with CSS3 box-shadow property?

Fuente

2012-01-24 20:52:42

Excelentes enlaces, gracias enorme Matt ... ¡Supongo que no soy solo yo entonces! Voy a jugar con la propiedad de imagen en el borde durante la próxima hora y ver si puedo encontrar algo utilizable. ¡Gracias! – gordyr

Resulta que usar la propiedad border-image fue bastante simple y ha resuelto el problema perfectamente. El último enlace que publicaste hizo el truco. Obviamente, modifiqué la imagen/CSS para adaptarme a mi sitio, agregué esquinas redondeadas y degradados y también pude reemplazar los degradados de CSS en una solución bastante elegante. Esto ha tenido el efecto secundario de reducir mi tamaño de CSS de forma espectacular, ya que no tengo que tener tantas líneas que soporten cada navegador en términos de gradientes/sombras de caja/radio de borde. ¡Aclamaciones! – gordyr

Utilicé 'box-shadow' en mis botones de la aplicación de mi teléfono y se retrasó antes de': active' con un retraso aún, seguro de que es un nuevo error. –

Puede que no sea la sombra de caja en particular, tal vez algo más en tu aplicación solo consuma demasiados recursos y la sombra de caja resulta ser la guinda del pastel.

Sin embargo, puedo confirmar que la sombra de cuadro en elementos demasiado largos o grandes causa problemas de rendimiento. Trabajo para un determinado creador de formularios arrastrar y soltar e intenté configurar box-shadow en un div de 900px x 1000px y el desplazamiento comenzó a retrasarse inmediatamente. La nuestra es una aplicación web muy ajax, por lo que otros podrían darse el lujo de obtener mejores resultados, pero aún así, creo que este es un ejemplo válido.

Así que fui a la vieja escuela y creé imágenes en su lugar. Creo que la forma más adecuada para que las sombras de la caja de imágenes funcionen sin demasiada carga de imagen es tener un elemento con un ancho fijo.

Lo que hice fueron tres cortes de imagen. Una rebanada desde arriba hasta justo por debajo de las esquinas superiores, una desde la parte inferior hasta justo por encima de las esquinas inferiores y una delgada rebanada desde el centro que utilicé en un div como imagen de fondo con una repetición y para poder cambiar dinámicamente a la altura de los divs adaptarse a la página de los usuarios.

Puede cortar aún más para caber en cualquier caja pero se vuelve demasiado (al menos 5 imágenes adicionales y 8 divs adicionales para ser precisos) para un box-shadow imo.

Fuente

2012-01-24 20:49:46 Ege

Al igual que la tuya, mi aplicación es una aplicación de una sola página, con recursos pesados y altamente ajax, que incluye muchos modos de arrastrar/soltar y efectos visuales. Lamentablemente, en todos los elementos no tengo el lujo de anchos fijos, aunque esto definitivamente arreglará algunos de ellos. Su solución suena buena, pero voy a dejar la pregunta abierta durante una hora más o menos con la esperanza de que a alguien se le ocurra otra alternativa. ¡Muchas gracias! – gordyr

por favor, me encantaría ver si alguien puede encontrar algo mejor. No soy muy aficionado a esto tampoco, pero a veces haces lo que tienes que hacer :) – Ege

sombras extremadamente lentas de CSS3 en Chrome

Respuesta

Cuestiones relacionadas