Box-shadow doesn’t re-render properly when javascript changes the containers size. (IE9/10)

[jimmykup]

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.

[dstorey]

It works for me here in the release version of IE10 in both desktop and the Metro UI modes.

[Author]

Posts