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

Question

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

为了克服这个问题，我为我的 reshape 创建了一个 .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 ，单击绿色操作按钮，模态应加载。 (首先在 chrome 上尝试，然后在 safari 上尝试。)你会注意到其中的区别。

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 .
• 您是否尝试过为 pickadate.js 添加 legacy.js？
• 即使在装有 Safari 8 的 2013 Mac 上，有时也会出现断断续续的情况。您是否可以尝试其他日期和时间选择器？