Javascript 在Safari上使用remodal和pickadate时出现严重的性能问题

我试图将remodal与pickadate一起使用，以便可以从modal中创建日期选择器和时间选择器。在第一次试验中，我发现日期选择器将被remodal隐藏，如下所示

为了解决这个问题，我为我的remodal创建了一个

.full-screen

类

.remodal {
    &.full-screen {
        max-width: none;
        height: 100%;
        width: 100%;
        margin: 0 auto;
    }
}

然后，它在铬合金中工作得非常好，如图所示：

然后我开始在我的iOS上测试这个站点，我发现覆盖层是乱七八糟的。我认为它被粘贴到了活动输入元素的底部。如iOS safari和iOS chrome所示：

通常我会在MacOSX中打开Safari并尝试修复CSS。但是，在Safari中加载同一页面时，会出现奇怪的严重性能问题：

• 我甚至无法加载开发工具
• Safari CPU持续超过100%
• 大约需要15秒才能加载模式
• 装载pickadate大约需要10秒钟

结果如下：

---

如果你想尝试，我已经暂时打开了链接，点击绿色的动作按钮，模态应该加载。（先在chrome上试用，然后在safari上试用。）你会注意到其中的区别

看起来您使用的是Safari 6或稍旧的版本？我目前还没有这个版本，但我相信我已经找到了解决您的一些问题的方法

在

.remodal overlay.remodal wrapper上使用
-webkit transform:translateZ（0px）
，将其删除

在

body.remodal-is-active.remodal

remove

-webkit转换：缩放（1）

在

.remodal.全屏上

将

高度设置为
100vh
并将
宽度设置为
100vw

在

.remodal

删除

-webkit转换：比例（0.95），同时删除
-webkit转换：-webkit转换0.2s减缓，不透明度0.2s减缓

现在你的定位应该更好了。但一些性能问题仍然存在

您的CSS和JS文件是连接在一起的，这使您很难正确了解正在发生的事情，但我确实注意到您可能需要了解的一些事情：

• 与创建两个时间选择器和两个日期选择器不同，您可能只希望创建其中一个，并将其附加到当前关注的输入元素。这将消除浏览器上的一些压力
• 您是否尝试将

  legacy.js

  包含在

  pickadate.js

  中
• 即使在2013款搭载Safari 8的Mac电脑上，有时也会出现起伏。你有没有其他的日期和时间选择者可以试试

---

有人吗？看看你是否可以重复同样的错误你认为你可以没有连接的资源和其他东西吗？这样调试就容易多了。我在下面试过了…嗨，Niklas，谢谢你的回答。你知道为什么Safari在这个意义上与Chrome如此不同吗？你需要一个未统一的javascript版本来进一步了解这个问题吗？很难找到这样的网站问题。如果您可以创建一个案例（换句话说，在仍然经历减速的情况下尽可能多地从HTML+CSS+JS中删除），那将是非常棒的。另外，您使用的是哪些版本的Safari和Chrome？