artefactos de sombra durante la animación en IE9

Question

Aquí están CSS, HTML y JS para reproducir:

html:

<div id="outer"> 
    <div>123</div> 
    <div id="inner">345</div> 
</div> 

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?

Answer 1

Intento # 1

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

Esto oculta la sombra y luego lo restaura después de la diapositiva es completa. 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 ambos recipientes exterior e interior. 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. Es hace eliminar el problema artefacto sin embargo.

Intento # 3 - My solución preferida

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

Esto todavía utiliza una animación simultánea de ambos recipientes exteriores/interior. 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 debe realizarse 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.

Answer 2

Esta solución funcionó para mí - simplemente animar el atributo box-shadow de los padres al mismo tiempo:

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

Answer 3

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; 
} 

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

En IE9, a menudo asignando overflow: hidden funcionará, aunque eso no funciona en IE10.

Answer 4

Esto me pareció funcionar: Simplemente envuelva el div en otro div con estos estilos en el div exterior

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

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

Answer 5

La solución para mí fue poner el DIV que quería desaparecer dentro de otra DIV como se mencionó anteriormente .... PERO ..... no se aplica alguna estilos especiales para ello. 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)