0

When setting the background-image from an "onbeforeunload" event handler in IE11 the DOM is updated with the correct background-image attribute but the new image isn't reflected in the window/frame.

Works as expected in other browsers including other versions of IE.

Is there something I am doing wrong or don't know about IE and onbeforeunload?

Using JSFIDDLE because it doesn't work in a Stack Overflow code snippet.

http://jsfiddle.net/carsont/jk8d3zmf/

NOTE: Hit "Run" to trigger the onbeforeunload event.

Code: 

$(function () {
    var $bg = $('#bg');

    $bg.css("background-image", 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAGUlEQVQIW2NkwAIYCQn+Z2BgACsiqBJuEgA0oAEG+FuXFQAAAABJRU5ErkJggg==")');

    window.onbeforeunload = function (e) {
        $bg.css("background-image", 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAATklEQVQYV2O0O3X+PwMDA8MhM0NGEI0LMBKtEJsJD27YgW1R0DgEtwWrdUQrxGYLY8V5iDUdhghrKFOITfenmXFgW/jSF+H3DNEKsdkCAO99IAvSBrFVAAAAAElFTkSuQmCC")');

        return "Don't leave";
    };
});

#bg {
    width: 50px;
    height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="bg"></div>
carson
  • 194
  • 1
  • 3
  • 12

1 Answers1

0

This issue can be resolved by forcing the DOM to update after setting the background image. Their are numerous ways to achieve this but I borrowed some from this thread: jQuery CSS rendering - works in Firefox, not in Chrome

Community
  • 1
  • 1
carson
  • 194
  • 1
  • 3
  • 12