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

Question

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

模态与pickadate,隐藏

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

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

然后它在Chrome中运行得非常好,如图所示:

全屏莫代尔带铬的全屏模态

然后我在我的iOS上测试该网站,我发现叠加层是混乱的.我认为它坚持活跃的输入元素的底部.如iOS safari和iOS chrome所示:

在ios safari中的pickatime ios chrome中的pickadate

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

结果如下:

safari macosx.

如果你想尝试,我暂时打开这里的链接,点击绿色操作按钮,模态应该加载.(首先尝试镀铬,然后狩猎.)你会发现差异.

Answer 1

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

当.remodal-overlay, .remodal-wrapper您使用时 -webkit-transform:translateZ(0px)，请将其删除。
body.remodal-is-active .remodal删除时-webkit-transform: scale(1);
设定为和到.remodal.full-screenheight100vhwidth100vw
.remodal删除时-webkit-transform: scale(0.95);，也删除-webkit-transition: -webkit-transform 0.2s ease-out, opacity 0.2s ease-out;

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

你的 CSS 和 JS 文件是串联的，这使得正确地了解正在发生的事情有点困难，但我确实注意到一些你可能想要研究的事情：

您可能只想创建两个时间选择器和两个日期选择器，并将其附加到当前聚焦的输入元素，而不是创建两个时间选择器和两个日期选择器。这应该会消除浏览器的一些压力。对此是有支持的。
您尝试过包括legacy.jsforpickadate.js吗？
即使在装有 Safari 8 的 2013 年 Mac 上，有时也会出现不稳定的情况。您是否可以尝试其他日期和时间选择器？