Artefactos de sombras durante la animación en IE9

Aquí están css, html y js para reproducir:

html:

123
345

css:

 #outer { -moz-border-radius: 5px; border-radius: 5px; box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.3); } #inner { height: 200px; } 

js:

 $(function() { $('#outer').click(function() { $('#inner').slideUp(); }); }); 

y http://jsfiddle.net/DwApF/ también

¿Alguna solución para este problema?

enter image description here

Intento # 1

http://jsfiddle.net/DwApF/3/

Esto oculta la sombra y luego la restaura después de que se completa la diapositiva. Es un truco de solución, pero esta es una manera en la que se pueden eludir una variedad de comportamientos.

Intento # 2

http://jsfiddle.net/DwApF/11/

Esto hace una animación simultánea de contenedores externos e internos. Desliza la sombra paralela sin artefactos. Sin embargo, deberá manipular manualmente la altura del contenedor externo y también tratar de ocultar el contenido del contenedor interno. Sin embargo elimina el problema del artefacto.

Intento # 3 – Mi solución preferida

http://jsfiddle.net/DwApF/12/

Esto todavía usa una animación simultánea de ambos contenedores externos / internos. No veo artefactos en IE9. También maneja la ocultación del contenido del contenedor interno usando overflow: hidden .

El tamaño del contenedor externo todavía debe ser hecho manualmente, pero creo que esta es una solución adecuada. Debería haber una forma de determinar la altura contraída utilizando jQuery para que este valor no tenga que estar codificado.

Esta solución funciona en IE9, Chrome y Firefox. Tenga en cuenta que he agregado algunos colores / bordes para que sea más fácil ver los diferentes contenedores.

La mala noticia es que el error es peor en IE10. La buena noticia es que esta simple regla parece solucionarlo, al menos lo hace en IE10. Como IE9 es compatible con: después de la pseudo clase, también debería funcionar.

 .Element:after { content: "."; font-size: 1px; display: inline; overflow: hidden; } 

Reemplace .Element con el nombre de clase o ID (#Element) del objeto que muestra el artefacto.

En IE9, a menudo asigna desbordamiento: oculto funcionará, aunque eso no funciona en IE10.

Esta solución funcionó para mí: simplemente anima el atributo de sombreado de caja del padre al mismo tiempo:

 $(function() { $('#outer').click(function() { $('#inner').slideUp(); $(this).animate({'box-shadow': '0px 3px 2px rgba(0, 0, 0, 0.3)'}); }); }); 

Esto me pareció útil: simplemente envuelva el div en otro div con estos estilos en el div externo

 padding-bottom: 10px; padding-right: 0px; overflow: visible 

No tengo idea de por qué esto hizo el truco para mí.

La solución para mí fue poner el DIV que quería desaparecer dentro de otro DIV como se mencionó anteriormente … SIN EMBARGO … No le aplico ningún estilo especial. En cambio, todo lo que hice fue usar jQuery para apuntar al nuevo DIV padre y hacer que desaparezca en su lugar.

Se deshizo de esos molestos artefactos de sombras para mí. (en IE10)