iOS scrolling when switching input fiels in a modal

[stickbyatlas]

Hey folks,

Thanks for the solid modal plugin. Just sharing a solution to an issue I had when working with text input fields in a modal form. This only came up on iOS (e.g. iPad) when the modal was active and the height of the page was greater than the viewport. When switching between input fields (either using the 'next' button or tapping on one directly), the entire modal would jump to the top of the screen and scroll back down into view each time input focus changed. It was super janky and disorienting. To solve the problem, I added the following code in my CSS declarations. Just posting this here in case someone else experiences the same problem and searches the issue tracker. Cheers.

html,body{
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

[whitewolf92]

Hmm, thanks for the solution. but it seems to make the page unable to be scroll. Is there any other solution around this?

[Blackskyliner]

#180 is similar in fact that scrolling is handled. I would guess, that applying overflow: hidden on the html and body, when an modal is open, will not only resolve the scrolling issue mentioned in the related issue but it should also fix the problem you had.

Reason why this happens is, that the mobile devices try to scroll the form element into the viewport of the user. If scrolling is already hard/non-optimal under normal circumstances it may also happen when automatic tasks try to scroll the viewport.

[Blackskyliner]

Also make sure, that your font-size is bigger than 16px on your input elements, otherwise mobile Safari will Zoom in to the Element causing the jankyness.

References:

• https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone