iOS Fixed Position Scrolling & Form Input Issues

[danieliser]

This serves to track the progress of research done on the issue as we still don't have a fully viable solution for the full list of issues:

Research needed

• [ ] How bootstrap, foundation and other CSS libraries handle it.
• [ ] How OM handles it.
• [ ] How drift/intercom.io etc handle it
• [ ] Whether height & width are better done like the modern options here: https://stackoverflow.com/questions/7357818/how-can-an-html-element-fill-out-100-of-the-remaining-screen-height-using-css

Various Solutions

• Best Description of the issue in laymens with examples. - https://hackernoon.com/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8
• Full description of all issues and some potential solutions - https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/
• Outlines potential issues with fixes from above, also includes how bootstrap handles it - https://weblog.west-wind.com/posts/2013/jun/01/smoothing-out-div-scrolling-in-mobile-webkit-browsers
• Fixes for keyboard opening: https://medium.com/@im_rahul/safari-and-position-fixed-978122be5f29
• Input issue described - https://dansajin.com/2012/12/07/fix-position-fixed/
• More research - https://code.tutsplus.com/tutorials/ios-5-fixed-positioning-and-content-scrolling--mobile-8332
• WordPress.org user discussions on the issue and potential solutions: https://wordpress.org/support/topic/popup-not-working-with-ios-11/
• https://stackoverflow.com/questions/44679794/position-fixed-on-chrome-mobile-causing-element-to-move-on-scroll-up-down

Related tickets.

• [ ] #646
• [ ] #645
• [ ] #609
• [ ] #470

Possible solutions.

• [ ] https://github.com/daneden/animate.css/issues/27
• [ ] https://github.com/PopupMaker/Popup-Maker/issues/645
• [ ] https://stanko.github.io/ios-safari-scoll-position-fixed/
• [ ] https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/

Original iOS ticket which is now marked resolved, though doesn't fix form issues in fixed elements completely, only carat position. There is another open issue for remaining issue, but I can't find it while writing this.

• https://bugs.webkit.org/show_bug.cgi?id=176896

[danieliser]

Punting to v1.10 as this is a low volume issue and a viable solution has not yet been confirmed.