Cienia artefakty podczas animacji w IE9

Question

Tutaj css, html i js do reprodukcji:

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

i http://jsfiddle.net/DwApF/ oraz

Jakiekolwiek obejścia tego problemu?

Answer 1

Próba # 1

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

to ukrycie cienia i przywraca go po suwak jest zakończona. To jest hack of a solution, ale jest to sposób na obejście różnych zachowań.

Próba # 2

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

ten ma równoczesne animacji obu pojemników zewnętrznych i wewnętrznych. Przesuwa cień bez żadnych artefaktów. Jednak będziesz musiał ręcznie manipulować wysokością zewnętrznego pojemnika, a także zajmować się ukrywaniem zawartości wewnętrznego pojemnika. To jednak eliminuje problem artefaktów.

Próba 3 - preferowanych rozwiązań

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

To nadal używa jednoczesne animacji obu pojemników zewnętrznych/wewnętrzna. Nie widzę żadnych artefaktów w IE9. Zajmuje się również ukrywaniem zawartości kontenera wewnętrznego za pomocą overflow: hidden.

Rozmiar zewnętrznego pojemnika nadal trzeba wykonać ręcznie, ale uważam, że jest to odpowiednie rozwiązanie. Powinien istnieć sposób na określenie zwiniętej wysokości za pomocą jQuery, aby ta wartość nie wymagała sztywnego kodowania.

To rozwiązanie działa w IE9, Chrome i Firefox. Zwróć uwagę, że dodałem trochę kolorów/obramowań, aby łatwiej było zobaczyć różne pojemniki.

Answer 2

To rozwiązanie pracował dla mnie - tylko animować atrybut box-shadow rodzica w tym samym czasie:

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

Answer 3

Złą wiadomością jest to, że błąd jest gorszy w IE10. Dobra wiadomość jest taka, że ​​ta prosta zasada wydaje się ją naprawiać - przynajmniej tak jest w IE10. Ponieważ IE9 obsługuje pseudo-klasę: after, powinna również działać.

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

Zamień .Element na nazwę klasy lub ID (#Element) obiektu, który pokazuje artefakt.

W IE9 często przypisywanie przepełnienia: ukryty zadziała - choć to nie działa w IE10.

Answer 4

Wydawało mi pracować: Wystarczy owinąć div w inny div z tych stylów na zewnętrznym div

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

Nie mam pojęcia, dlaczego to załatwiło sprawę dla mnie.

Answer 5

Rozwiązaniem dla mnie było umieszczenie DIV, które chciałem zniknąć wewnątrz innego DIV, jak wspomniano wcześniej ... JEDNAK ... JA nie stosuję żadnych specjalnych stylów do tego. Zamiast tego, wszystko, co zrobiłem, to użycie jQuery do celowania w nowy rodzicielski DIV i sprawienie, że zniknie.

Pozbyłem się tych irytujących artefaktów cieni dla mnie. (w IE10)