Question

Safari问题：我写了这个简单的模态脚本，由于某种原因，在safari浏览器osx或ios中根本没有工作，没有。看起来根本没有加载脚本，控制台中没有任何错误。我不知道从哪里开始解决这个问题。有趣的是我在jQuery中有相同逻辑的版本，也不会工作。

IE 11：所有似乎都在工作，但由于某种原因，输入动画被省略。同样，控制台中的错误也不知道如何开始调试。

如果有经验的人可以检查并指出我正确的方向，我将非常感激。

完整的代码HTML，CSS和JavaScript

这是完整的： JSBin

Answer 1

我发现了所有问题。

首先，我在严格模式下运行脚本，并且能够找到错误定义的变量的所有问题。

final Handler handler = new Handler();
    final Runnable countDownTimer = new Runnable() {
        @Override
        public void run() {
            handler.postDelayed(this, 1);
        }
    };

    handler.postDelayed(countDownTimer, 0);

例如，定义没有关键字var的变量会引发错误。我必须确保所有变量都正确实例化。例如：

(function(){
   "use strict";
   // Main code here

})();

脚本一直在工作，主要问题与css和我试图显示元素的方式有关。我正在使用：

var modalBg;

没有前缀显然它不会工作。我放弃了使用flexbox的想法并使用了：

display: flex;

代替。

动画在Internet Explorer中出现故障的原因与JavaScript本身有关。

display: block;

classList方法在现代浏览器中一次添加多个类时工作正常：Chrome，Firefox。我发现IE 11和Safari 5.1.7很难以这种方式解释代码，因此我改为：

modalBg.classList.add('openned', 'animated', 'fadeIn');

当时添加一个类，这个技巧和脚本现在正确执行。

如果有兴趣的话，我在JSBin上更新了代码:) JSBIN

自定义模态脚本 - Safari和IE问题

1 个答案: