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: https://i.stack.imgur.com/HUmJE.png )
- First jQuery appends some HTML to the container.
- When you hover over the container, I use .remove() to get rid of that same HTML.
- Because the HTML is removed, the parent container (with the box-shadow) changes in height.
- 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.