I'm just curious why this happens, and if it can be fixed (I'm aware IE is old & evil, not to be used online any more, this is just for some test-case and compatibility).
There is listener for "beforeunload" and changes body class (I see it does add that class), but it does not apply the style defined for that class in IE (other new browsers work fine).
<?php /* emulate long load */ sleep(2); ?><!DOCTYPE html>
<html><head><meta charset="utf-8">
<style>
body.is-unloading {background:#333;opacity:0.5}
</style>
<script>
function xx(){ document.querySelector('body').className += ' is-unloading'; }
window.addEventListener("beforeunload", function(event) { xx(); });
</script>
</head><body class="not-unloading">
<button onClick="window.location.reload()">RELOAD</button>
</body></html>
window.location.href=window.location.hrefworks. I think it's by design and different browser engines have different behaviors. It might be an issue in IE, even so, it won't be fixed because Microsoft announced the retirement of IE.beforeunload, it says It is recommended that developers listen for beforeunload only in this scenario: the scenario where the user has entered unsaved data that will be lost if the page is unloaded. I think you don't need to worry too much about the scenario in your example as we usually don't use this event like this.