The issue only occurs on Facebook's In-App Browser (and Messenger) on iOS. Doesn't reproduce on Safari @ iOS, Chrome @ iOS or Facebook's In-App Browser on Android.
When having an input inside an iframe, and when the iframe has position: fixed; and is positioned to the bottom of the viewport (i.e. bottom: 0;) - the input is focus-able only once.
Once it's being focused, the keyboard pops up, and after closing the keyboard - the page "freezes" and the input cannot be focused again - until the page is being scrolled which release the freeze.
Narrowed it down to the following snippet:
- Website: https://adiramsalem.github.io/ios-iframe-input-bug/
- Source: https://github.com/AdirAmsalem/ios-iframe-input-bug/blob/master/index.html
- Video: https://drive.google.com/file/d/1DDA7GaFKmD69nG51aleZqdYpGM-v9BNW/view
As it only reproduces on Facebook's In-App Browser on iOS, the snippet can be opened via the following Facebook Page: (in the Website section) https://www.facebook.com/pg/Adirs-Sport-Store-881742425287139/about/
Code:
<iframe style="position: fixed; bottom: 0; height: 100px;" srcdoc="<input/>"></iframe>
Anyone encountered a similar issue or has any advice?