Safari PWA Weird Bug

[MovingGifts]

This one is a very weird bug and I was able to reproduce it with the react stripe elements example. The bug is related to the keyboard issue with the focus/blur of the iframe I believe, but is a part that was overlooked/not fixed for the PWA edge case.

Our forked repo is the same as the stripe elements repo, but we made it a PWA by adding a mainfest.json and server-worker.json, which is where the issue occurs. Note that we tested this on other devices/browsers and there are NO issues with the keyboard, so the other issues surrounding the keyboard in this repo have been fixed, just not this one!

Running an iPad 9.3.5, Safari 9.3.5, since they match versions on iOS, visit our stripe demo link we set up using the stripe elements examples from our forked repo. For the very first stripe example, start filling out 424242 etc all across until zip, it works fine no problem.

Now add it as a PWA to the homescreen to see the bug:

1. Click the share icon from Safari, then add to home screen, then add.
2. This will add the icon to your homescreen, now click it.
3. The page opens in standalone mode (as defined in the manifest.json, so no browser url bar on top).
4. Now do the same thing, for the very first stripe example, start filling out 424242 etc all across until zip, you'll see many issues with the keyboard closing and opening multiple times, and you can't get across smoothly to finish the zip code, like you were able to before adding to home screen.

We tested on an iPhone running 11.4, and there were no issues there with the keyboard in the PWA, so it seems to be narrowed down to the 9.3.5 version (only tested on those two iOS device versions).

I don't know if this can help, but this snippet will determine if it is an iOS PWA (Safari standalone mode):

function isSafariStandaloneMode() {
  return (/Safari/i.test(navigator.userAgent)) && ('standalone' in window.navigator) && (window.navigator.standalone);
}

Maybe stripe v3 js needs to integrate a mechanism to detect this with something like the snippet above and not have the keyboard go all crazy showing and hiding it multiple times while just moving through the fields horizontally. Any idea how we can fix this bug/issue?

[MovingGifts]

So, is this a fixable bug from the stripe side?

[atty-stripe]

Hi @MovingGifts, thanks for the bug report. As you mentioned, I was able to reproduce in iOS 9, but not in the later versions. I'm going to add this to our bug tracker and will keep you posted once we fix it.

[MovingGifts]

@atty-stripe Thank you! Will patiently await the fix :)

[sashko-stripe]

Closing this as this project has migrated to React Stripe.js. If you believe this is still important, please re-open it there.