Serious performance issue when using remodal and pickadate on Safari

Question

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.

Answer 1

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?