当javascript更改容器大小时，Box-shadow不会正确重新呈现。 （IE9 / 10）

Question

I recently ran into this issue when cross-testing a design in IE9 and IE10. Here's a simplified version of it on codepen. http://codepen.io/jimmykup/full/DHeBC.com (and here's a screencap of the issue in action: http://i.imgur.com/xEQ52.png )

1. First jQuery appends some HTML to the container.
2. When you hover over the container, I use .remove() to get rid of that same HTML.
3. Because the HTML is removed, the parent container (with the box-shadow) changes in height.
4. In IE9+ the box-shadow stays with the container, but it also leaves behind a second shadow where the box use to stretch to.

Everything works fine in the latest versions of Firefox, Chrome and Opera. IE9 and 10 are the problem.

Answer 1

Just cause a repaint on the element with the drop shadow. To cause a repaint change the z-index. In your case add this in your $('form').hover after the remove. You can change it to what z-index was previous with the code below or simply set it to 1.

$('#lightning-deal').css('z-index', $('#lightning-deal').css('z-index'));