IE 9 and 10 box-shadow on resizing element

Question

http://jsbin.com/ararar/5/edit

tl;dr The above link is a quick example of the problem further described below. Click on the li:s to remove them, and see the rendering glitch in IE9 or IE10.

In an app that my team is building, we have a box for search results, that changes in height depending on the number of matches. The element has a box-shadow applied to it. The problem is in IE9 and IE10, when the box becomes smaller. It seems like IE will "forget" about the box-shadow, and only re-render the inside part of the element. The box-shadow will still be rendered at the bottom of the resized element, but a copy of the shadow will usually be left in place where it was rendered before the element resized.

If there is any way to get around this, any info would be most appreciated.

Answer 1

I took the solution from Andy but instead of putting an empty element in the markup, I simply added an empty CSS pseudo-element on the parent (the one with the shadow, not the resized element).

.shadowed-element:after { content: ""; }

Works perfectly with animated height in jQuery, repainting during the animation and not only at the end. Thanks Andy for putting me on the right track !

Answer 2

(I realise that this answer is a bit late, but I think it's worth documenting a working solution/workaround.)

I had a similar problem recently. The solutions seems to be add an additional <div> tag below the one with the box shadow. Make sure that there is no margin between these two <div>s and that the height is at least as high as the height of the bottom shadow and the width as wide as the shadow. This seemed to force IE to repaint the area where the shadow used to be when the bottom <div> moves up.

In your case, I added left and right margins to the <div>with the box shadow as well as adding the "shadow-fix" <div>. You can see the new version here: http://jsbin.com/ararar/51/edit

Hope that helps you or someone else.