1

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 )

  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.

1 Answer 1

4

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'));
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.