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

Question

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

模态的带有pickadate的模态，隐藏

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

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

然后它在 Chrome 中运行良好，如下所示：

全屏模式带有 chrome 的全屏模式

然后我开始在我的 iOS 上测试这个网站，我发现覆盖层很乱。我认为它粘在活动输入元素的底部。如 iOS safari 和 iOS chrome 所示：

ios safari 中的pickatime ios chrome中的pickadate

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

结果如下：

野生动物园

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

score 2 · Accepted Answer

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

在.remodal-overlay, .remodal-wrapper您使用 -webkit-transform:translateZ(0px)时，将其删除。
移除body.remodal-is-active .remodal时-webkit-transform: scale(1);
.remodal.full-screen设置height到100vh和width到_100vw
在.remodal删除-webkit-transform: scale(0.95);时，也删除-webkit-transition: -webkit-transform 0.2s ease-out, opacity 0.2s ease-out;

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

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

1 回答 1