Adds support for Safari on iOS, fixes #17

[kennethormandy]

I was able to reproduce the issue described in #17 using Safari on iOS 13.

The support check seemed correct from my testing, and all that was missing was a timeout so restoreScrollPosition will happen after nativeFocus.

This PR adds a 100ms timeout, which fixes the issue. Some comments on this Stack Overflow post suggest that’s also necessary for older versions of IE.

I also updated the test case to add an input, which worked better as a test for touch devices. When the polyfill is working, the keyboard will open automatically.

[calvellido]

Thanks a ton for taking care of that @kennethormandy! Not in the PC at the moment, but I will try to have a look and merge it tomorrow 🙂

[calvellido]

@kennethormandy this approach is great, but I'm detecting a bit of flashing (basically the scrolling down being seen) on the behaviour, as those 100ms seems enough in CPU powerful enough devices for the scroll to go down and then get back. Paying attention, it can also be detected on you screen capture.

This flashing might not be ideal for the rest of cases of the polyfill, so we might need to just enable it for the iOS Safari cases, where this would be the price to pay for this to work.

Or, in my checks, a timeout value of 0 is also making this to work, while keeping the same behaviour for the rest of cases. Could you try it?

Thanks!

[kennethormandy]

Good call, I’ve changed it to 0, and that also works on iOS without the screen flash.

[calvellido]

👏👏👏

[calvellido]

Thanks @kennethormandy, this is now released as part of 1.5.0:

• https://github.com/calvellido/focus-options-polyfill/releases/tag/v1.5.0
• https://www.npmjs.com/package/focus-options-polyfill/v/1.5.0