Datepicker flickers on click, becomes hidden/disabled/inaccesible (iPad Mini iOS 8.x Safari)

[gelsaby]

There is a random bug that seems to only happen on iPad Mini Safari (iOS 8.x). iPad sometimes has this bug, but it seems to fix itself on a second or third try (whereas iPad mini requires the page to be refreshed). iPhone Safari on iOS 8.x also seems to be fine. Unfortunately, none of the iOS simulators were able to replicate this issue, it only happens on the device itself.

The bug never appears on first click, but second or [later] click. It seems that the cursor gets 'trapped' inside the input, at which point the default keyboard and the modal window seem to 'fight' each other for who gets to display. Unfortunately, neither do, and the only resort is to refresh the entire page.

Examples here (using vs. 3.5.6 of pickadate):
with jQuery 2.1.3
https://www.dropbox.com/s/5voihldid2a896x/pickadate-iPadmini-solo.mov?dl=0

with jQuery 1.11.1 (original demo page)
https://www.dropbox.com/s/wlahlqt3nctlhcu/pickadate-iPadmini-original.mov?dl=0

I'm not entirely sure what is causing this problem - I thought at first it might be the viewport (initial-scale=1), or conflict with other JavaScript, or an updated version of jQuery (e.g. 2.1.3.), but this bug appears regardless of the aforementioned. I had a hunch it might be related to #523, but it appears that was fixed with 3.5.6.

Everything about this datepicker is awesome (it's the most accessible and flexible I've seen), it's just this one random issue that leaves me a little concern - in case a user decides to choose a different date and might not know to refresh the page, they may just abandon the form (especially when it's a required input).

Thank you so much!

[frodik]

I have this same bug on Chrome both desktop and Android version. Please take a look at it as it blocks me from using it on my project I need do finish soon. Thanks too.

[Nivani]

We are also seeing this issue on iPad mini with iOS 8.x. The keyboard seems to try to show up and then goes away and nothing shows up. We have a very similar setup: pickadate 3.5.6 and jQuery 2.1.4.

[Nivani]

We did some more testing this morning and came to the same conclusions as @gelsaby. The problem seems to appear most on iPad mini and we were not able to reproduce the problem on an iPhone. We can consistently reproduce it by double tapping (or multi-tapping) the input element. Sadly, we do not have a mac here, so I cannot debug the problem :(

[Nivani]

We now have a mac and had a chance to debug the problem with moderate success: disabling the animation on .picker__holder fixes the problem. In the end we disabled the other animations as well because they were not running smoothly anyway:

/* Disable animations to fix the datepicker not showing up sometimes in iOS8+ */
.picker__holder,
.picker__frame,
.picker--opened .picker__holder {
  transition: none !important;
}

[fcamblor]

Thanks @Nivani it fixed an issue we had on iOS 9.x as well

[amsul]

@Nivani thanks for the workaround!

This won't be a problem in v4. Closing this as this is a decent enough trade off for now 👍