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.
It works for me here in the release version of IE10 in both desktop and the Metro UI modes.
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.
It works for me here in the release version of IE10 in both desktop and the Metro UI modes.