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.