.submit JS, не отображающая наложение CSS в Safari (если я не отменю загрузку страницы)

У меня есть странная проблема с Safari в оверлее, не отображается правильно при отправке формы.

Что должно произойти, когда нажата кнопка отправки в форме, надпись появляется над формой.

Что происходит, так это то, что ничего не появляется (хотя кажется, что что-то не так, как я не могу нажать кнопку снова). Интересно, хотя я должен отменить загрузку страницы, наложение появляется.

Вот код javascript, который запускается, должна быть представлена форма.

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");
        }
    });
}

Вот CSS для класса "loading", для чего он стоит.

.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%;
        }
    }

JavaScript загружается (консоль записывает фразы "В здесь" и "Показать наложение" соответственно, и в случае отмены появляется оверлей). Однако наложение не появляется при щелчке.

Я пробовал следующие браузеры, успешно....

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

Любые идеи были бы полезны. Также, если вам нужно что-нибудь еще, пожалуйста, дайте мне знать.

Ответ 1

В стороне, мне удалось это исправить, и @PeterTheLobster подошел ближе.

Короче говоря, присоединяясь к слушателю 'click', мы затем e.preventDefault(); в форме, убедитесь, что наложение было отображено путем задержки отправки формы на 1 секунду.

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

    html = '<div class="loading-overlay"><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-overlay');

    jQuery('#gform_submit_button_2').on('click', 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
        window.setTimeout(function() {
            form = jQuery('.main-form form');
            form.submit();          
        },1000);
    });
}

Ответ 2

Проверено в сафари/окнах и работает нормально. Я полагаю, что проблема была background: rgba(#999,0.9). Вы можете проверить, меняя комментарии для этих строк в css-

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

Пожалуйста, обратитесь к fiddle.

Ответ 3

Из того, что я помню, Safari будет блокировать рисование, как только он начнет загружать страницу. Вы пытались предотвратить подачу, делаете свои вещи и просто отправляете?

Что-то вроде этого может работать:

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();
    });
}

Ответ 4

Думаю, у тебя другая проблема. Вы уверены, что var overlay находится в нужный момент, указывая на ваши элементы? Или это undefined?

Я думаю, что это не указывает на это. Просто сделайте тест. Поместите <div class="loading">testmessage</div> в свой html и просто добавьте/замените innerHtml на свою функцию.

В этом случае вы можете быть уверены, что overlay = jQuery('.main-form .loading'); действителен.