.submit JS function not displaying CSS overlay in Safari (unless I cancel page load)

Question

I'm having an odd problem with Safari in an overlay isn't displaying correctly on submitting the form.

What should happen is when the submit button on the form is clicked, the overlay appears over the form.

What is happening is that nothing is appearing (though it appears as though something is as I am unable to click said button again). What is interesting though is should I cancel the page load, the overlay appears.

Here is the javascript code that is running should the form be submitted.

function main_form_overlay() {
    var form_outer = jQuery('.main-form'),
    form = jQuery('.main-form form'),
    html,
    overlay;

    html = '<div class="loading"><span class="text">Checking 77 Destinations, please Be Patient <i class="fa fa-circle-o-notch fa-spin"></i></span></div>';

    form_outer.append(html);

    overlay = jQuery('.main-form .loading');

    form.on('submit', function(){
        console.log("In Here!");

        if (!overlay.is(':visible')) {
            overlay.show();
            console.log("Show Overlay");
        } else {
            overlay.hide();
            console.log("Hide Overlay");
        }
    });
}

Here is the CSS for the "loading" class, for what it's worth.

.loading {
    background: rgba(#999, 0.9);
    bottom: -10px;
    display: none;
    left: -20px;
    position: absolute;
    right: -20px;
    top: -10px;

    .text {
        color: #fff;
        font-size: 26px;
        font-weight: 700;
        left: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        }
    }

The JavaScript is loading (the console logs the "In here" and "Show Overlay" phrases respectively, and if cancelled the overlay appears). However the overlay it doesn't appear on click.

I've tried on the following browsers, successfully....

• Chrome (Apple Mac)
• Firefox (Apple Mac)
• Internet Explorer (Windows)

Any ideas would be helpful. Also if you need anything else, please let me know.

Answer 1

Checked in safari/windows and it is working fine. I suppose the problem was background: rgba(#999,0.9). You can check by interchanging comments for these lines in css-

/*background: rgba(#999, 0.9);*/
background: rgba(158,158,158,0.9);

Please refer this fiddle.

Answer 2

From what I remember Safari will block drawing stuff once it starts loading a page. Did you try preventing the submit, doing your stuff and just then submitting?

Something like this could work:

function main_form_overlay() {
var form_outer = jQuery('.main-form'),
form = jQuery('.main-form form'),
html,
overlay;

html = '<div class="loading"><span class="text">Checking 77 Destinations, please Be Patient <i class="fa fa-circle-o-notch fa-spin"></i></span></div>';

form_outer.append(html);

    overlay = jQuery('.main-form .loading');

    form.on('submit', function(event){
        //Prevent the form from submitting
        var e = event || window.event;
        e.preventDefault();
        console.log("In Here!");

        if (!overlay.is(':visible')) {
            overlay.show();
            console.log("Show Overlay");
        } else {
            overlay.hide();
            console.log("Hide Overlay");
        }
        //Submit the form now
        $(this).submit();
    });
}