Serious performance issue when using remodal and pickadate on Safari

Question

I tried to use remodal along with pickadate, so I can create a date picker and a time picker from a modal one. On the first test, I found out that the date picker will be hidden during the rebuild, as shown below.

To overcome this problem, I created a .full-screen class for my remodeling.

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

Then it works fine in Chrome, as shown below:

Then I can check the site on my iOS, and I found out that the overlay is running. I think it is attached to the bottom of the active input element. As shown on iOS Safari and iOS Chrome:

Normally, I would open my Safari on MacOSX and try to fix CSS. However, when the same page loads in Safari, a strange, serious performance hit occurs:

• I could not even download the developer tool
• Safari processor constantly exceeds 100%
• It takes ~ 15 seconds to download modal
• It takes ~ 10 seconds to load picadate.

and the result is as follows:

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

Answer 1

Sounds like you're using Safari 6 or a slightly older version? At the moment I do not have this version, but I believe that I have found fixes for several of your problems.

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

Now your positioning should be better. But some performance issues still persist.

Your CSS and JS files are combined, which makes it a little difficult to get through what is going on, but I notice a few things that you might want to learn:

• Instead of creating two time selectors and two date selectors, you can only create one of them and attach it to the input element that is currently focused. This should eliminate the load on the browser. There is support for this .
• Have you tried enabling legacy.js for pickadate.js ?
• Even on a 2013 Mac with Safari 8, this is sometimes interrupted. Perhaps you have a different choice of time and time?