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

我试图将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秒钟。

结果如下：

如果你想尝试，我暂时打开这里的链接，点击绿色操作按钮，模态应该加载。 （首先尝试使用chrome，然后进行safari。）你会注意到差异。

Answer 1

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

1. 在.remodal-overlay, .remodal-wrapper使用-webkit-transform:translateZ(0px) ，删除它。
2. 在body.remodal-is-active .remodal remove -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文件是串联起来的，这使得正确处理正在发生的事情变得有点困难，但我注意到你可能想要研究的一些事情：

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