在Safari上使用remodal和pickadate时出现严重的性能问题 [英] Serious performance issue when using remodal and pickadate on Safari

问题描述

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

为了解决这个问题，我创建了一个 .full-screen class for my remodal。

  .remodal {
& .full-screen {
最大宽度：无; 
身高：100％; 
宽度：100％; 
 margin：0 auto; 
} 
} 
  

然后在Chrome中运行得非常好，如下所示：

< img src =https://i.stack.imgur.com/NFeTh.pngalt =全屏模式与镀铬>

然后我得到在我的iOS上测试该网站，并发现覆盖层被混淆。我认为它被粘贴到活动输入元素的底部。正如iOS safari和iOS chrome所示：

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

• 我甚至无法加载开发人员工具


• Safari CPU持续超过100％


• 加载模式需要约15秒钟


• 它大约需要10秒才能加载pickadate。

，结果如下：

如果您想尝试，我暂时打开连结此处，按一下绿色动作按钮并加载模态。 （先在Chrome上试试，然后再进行Safari浏览器），你会发现它们的区别。

解决方案

看起来您正在使用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 set 高度至 100vh 和宽度至 100vw


4. 在 .remodal 删除 -webkit-transform：scale（0.95）; ，同时删除 -webkit-transition：-webkit-transform 0.2s缓解，不透明度0.2s缓解;



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



您的CSS和JS文件被串联在一起，使得正确地浏览发生的事情有点困难，但是我注意到了一些您可能想要查看的内容：

• 与其创建两个时间选择器和两个日期选择器，您可能只想创建其中的一个并将其附加到当前的输入元素聚焦。这应该消除浏览器上的一些压力。 支持。


• 您是否尝试过包括 legacy.js 用于 pickadate.js ？


• 即使在2013年使用Safari 8的Mac有时会出现波动。你可能有其他的日期和时间选择器试试吗？

I was trying to use remodal together with pickadate so I can create a date-picker and time-picker from within the modal. On first trial I found out the datepicker would be hidden by the remodal, as shown below.

To overcome this issue I created a .full-screen class for my remodal.

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

It then works perfectly fine in Chrome, as shown:

Then I get to test the site on my iOS, and I found out the overlay is messed. I think it got sticked to the bottom of the active input element. As shown in both iOS safari and iOS chrome:

Normally I would then open my Safari in MacOSX and try to fix the CSS. However, when the same page is being loaded in Safari, there is a strange serious performance hit:

• I couldn't even load the developer tool
• Safari CPU constantly over 100%
• It takes ~15 seconds to load the modal
• It takes ~10 seconds to load the pickadate.

and the result is as below:

If you want to try, I have temporarily open the link here, click on the green action button and the modal should load. (try it on chrome first, then safari.) and you will notice the difference.

解决方案

It looks like you are using Safari 6 or some such slightly older version? I don't have that version available at the moment, but I do believe I have found fixes for a few of your troubles.

1. On .remodal-overlay, .remodal-wrapper you use -webkit-transform:translateZ(0px), remove that.
2. On body.remodal-is-active .remodal remove -webkit-transform: scale(1);
3. On .remodal.full-screen set height to 100vh and width to 100vw
4. On .remodal remove -webkit-transform: scale(0.95);, also remove -webkit-transition: -webkit-transform 0.2s ease-out, opacity 0.2s ease-out;

By now your positioning should be better. But some performance issues still linger.

Your CSS and JS files are concatenated making it a bit hard to properly walk through what is happening, but I do notice a few things you might want to look into:

• Rather than creating two time selectors and two date selectors you might want to only create one of each and attach it to the input element which is currently focused. This should remove some strain on the browser. There is support for this.
• Have you tried including legacy.js for pickadate.js?
• Even on a 2013 Mac with Safari 8 it is sometimes choppy. Do you maybe have other date- and time pickers to try?

这篇关于在Safari上使用remodal和pickadate时出现严重的性能问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！