javascript - .submit JS 函数在 Safari 中不显示 CSS 覆盖(除非我取消页面加载)

Question

我在 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，它的值(value)。

.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 正在加载(控制台分别记录“In here”和“Show Overlay”短语，如果取消，则显示覆盖)。但是，点击时不会显示叠加层。

我在以下浏览器上试过，成功....

• Chrome(苹果电脑)
• Firefox(苹果电脑)
• Internet 浏览器 (Windows)

任何想法都会有所帮助。另外，如果您还需要其他任何东西，请告诉我。

Answer 1

在 safari/windows 中检查，它工作正常。我想问题是 background: rgba(#999,0.9)。您可以通过在 css- 中交换这些行的注释来检查 -

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

请引用这个fiddle .