Shadow artifacts during animation in IE9

Question

Here are css, html and js to reproduce:

html:

    
123
    
345


        
                      

              相关标签:
       
      

Answer 1

This solution worked for me - just animate the box-shadow attribute of the parent at the same time:

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

Answer 2

This seemed to work me: Simply wrap the div in another div with these styles on the outer div

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

No idea why this did the trick for me.

Answer 3

The solution for me was to put the DIV I wanted to vanish inside another DIV as was mentioned earlier.... HOWEVER..... I don't apply any special styles to it. Instead, all I did was use jQuery to target the new parent DIV and make that disappear instead.

It got rid of those annoying shadow artifacts for me. (on IE10)

Answer 4

The bad news is that the bug is worse in IE10. The good news is that this simple rule seems to fix it - at least it does in IE10. Since IE9 supports the :after pseudo class, it should also work.

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

Replace .Element with either the class name or ID (#Element) of the object that shows the artifact.

In IE9, often assigning overflow: hidden will work - though that does not work in IE10.

Answer 5

Attempt #1

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

This hides the shadow and then restores it after the slide is complete. It's a hack of a solution but this is a manner in which a variety of behaviors can be circumvented.

Attempt #2

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

This does a simultaneous animation of both outer and inner containers. It slides the drop shadow with no artifacts. However, you will need to manually manipulate the height of the outer container, and also deal with hiding the contents of the inner container. It does eliminate the artifact issue though.

Attempt #3 - My Preferred Solution

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

This still uses a simultaneous animation of both outer/inner containers. I see no artifacts in IE9. It also handles hiding the inner container's content using overflow: hidden.

The sizing of the outer container still must be done manually, but I think this is an adequate solution. There should be a way to determine the collapsed height using jQuery so that this value doesn't need to be hard-coded.

This solution works in IE9, Chrome, and Firefox. Note that I have added some colors/borders so that it's easier to see the different containers.