Page loading overlay not shown on Safari when navigating to another page

Question

I have a web application that displays an overlay only when the page is loading (some server work). It works fine in Firefox and Chrome. For example when I login: i fill in the login form, then I click the login button, the overlay appears - while the server checks, then after a moment, another page is served or an error message is displayed.

The overlay won't display using Safari.

HTML code

<div class="overlay"  style="display: none;" id="loadingDiv">

javascript - jquery

 window.onbeforeunload = function(e) { $("#loadingDiv").show(); };

In safari: when I manually comment out the HTML initial hidden state - it shows. (That indicates that my CSS is alright.) But that's not how it should function.

I tried using opacity: 0 instead and the whole page is frozen.

How I get the overlay to appear only on page loads - like in Chrome?

Answer 1

After chatting with Siavas. I decided to handle action for form submissions and some clicks to trigger the overlay.

Here is my resulting javascript:

function init() {
    var forms = document.forms;
    for (var i = forms.length - 1; i >= 0; i--) {
        forms[i].onsubmit = function() {
            $("#loadingDiv").show();
        };
    }
    var subnav = document.querySelectorAll("ul.subnav li a");
    subnav.forEach(link => {
        link.addEventListener("click", function () {
            $("#loadingDiv").show();
        });
    });
}
document.addEventListener('readystatechange', function() {
    if (document.readyState === "complete") {
        init();
    }
});

At the bottom, a listener is added, upon being ready the init function is executed. The overlay is shown for each form submission. Then a listener is added for clicks (on ul.subnav > li > a) that also shows the overlay. This works in all browsers. Like Tom was showing.