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

Question

我试图将remodal与pickadate一起使用，这样我就可以在模态中创建日期选择器和时间选择器。在第一次试验中，我发现日期选择器将被重新隐藏，如下所示。

为了克服这个问题，我为我的remodal创建了一个.full-screen类。

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

然后在Chrome中完美运行，如图所示：

然后我在我的iOS上测试该网站，我发现叠加层是混乱的。我认为它已经粘贴在活动输入元素的底部。如iOS safari和iOS chrome所示：

通常我会在MacOSX中打开我的Safari并尝试修复CSS。但是，当在Safari中加载相同的页面时，会出现奇怪的性能损失：

• 我甚至无法加载开发者工具
• Safari CPU不断超过100％
• 加载模态
需要约15秒
• 加载pickadate大约需要10秒钟。

，结果如下：

如果你想尝试，我暂时打开链接here，点击绿色操作按钮，模态应该加载。 （首先尝试镀铬，然后狩猎。）你会发现差异。

Answer 1

看起来你正在使用Safari 6或一些稍微旧版本？我目前没有这个版本，但我确实相信我找到了一些你的麻烦修复。

1. 在.remodal-overlay, .remodal-wrapper上使用 -webkit-transform:translateZ(0px)，删除它。
2. 点击body.remodal-is-active .remodal删除-webkit-transform: scale(1);
3. 在.remodal.full-screen上设置height至100vh和width至100vw
4. 点击.remodal删除-webkit-transform: scale(0.95);，同时删除-webkit-transition: -webkit-transform 0.2s ease-out, opacity 0.2s ease-out;

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

你的CSS和JS文件是连接起来的，这使得正确处理正在发生的事情变得有点困难，但我注意到你可能想要研究的一些事情：

• 您可能只想创建其中一个并将其附加到当前关注的输入元素，而不是创建两个时间选择器和两个日期选择器。这应该可以消除浏览器上的一些压力。 There is support for this。
• 您是否尝试将legacy.js包括在pickadate.js？
中
• 即使在使用Safari 8的2013 Mac上，它也有时不稳定。您是否可以尝试其他日期和时间选择器？