iOS 11 Fixed Modal Bug

Question

I have a fixed modal that has some scrollable content and some input fields. I'm having an issue where I focus on an input field, which pops up the keyboard, and then scroll. It seems the DOM elements are misaligned compared to what is actually rendered on the screen. See the screenshot - the highlighted area should be where the continue button is. This means that I can't click continue as expected.

I thought this might be the issue, however the fix doesn't seem to have worked fully (still broken on iPhone X).

Has anyone else run into this issue or got a fix?

hackernoon.com/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8

Update: This has been confirmed as an iOS bug and will be fixed in an upcoming release. see here: https://bugs.webkit.org/show_bug.cgi?id=176896 — ThatTobMate, Dec 18 '17 at 16:34
The fix has been confirmed in the 11.3 beta build. So it's just a waiting game until that makes its full release. — ThatTobMate, Jan 25 '18 at 08:34

score 0 · Answer 1 · answered Dec 15 '17 at 00:08

Yes, I've experienced this bug. Although not perfect, and it won't work for every site, cursor is still a little out, but it's at least within the input field and you can skip between fields... here's my fix...

It also helps to make the modal 100% width.

I've been following this thread for updates of a fix in iOS itself, seems like it's getting close - https://bugs.webkit.org/show_bug.cgi?id=176896

@media
only screen /* iPhone X */
and (device-width : 375px) 
and (device-height : 812px) 
and (-webkit-device-pixel-ratio : 3),
only screen /* iPhone 8 */
and (device-width : 375px) 
and (device-height : 667px) 
and (-webkit-device-pixel-ratio : 2),
only screen /* iPhone 8 Plus */
and (device-width : 414px) 
and (device-height : 736px) 
and (-webkit-device-pixel-ratio : 3),
only screen /* iPhone 7 */
and (min-device-width : 375px)
and (max-device-width : 667px), 
only screen /* iPhone 7 Plus */
and (min-device-width : 414px)
and (max-device-width : 736px),
only screen /* iPhone 6 */
and (min-device-width : 375px) 
and (max-device-width : 667px),
only screen /* iPhone 6 Plus */
and (min-device-width : 414px) 
and (max-device-width : 736px),
only screen /* iPhone 5 & 5S */
and (min-device-width : 320px) 
and (max-device-width : 568px),
only screen /* iPad */
and (min-device-width : 768px) 
and (max-device-width : 1024px),
only screen /* iPad 3 and 4 */
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2),
only screen /* iPad 1 and 2 */
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1),
only screen /* iPad Mini */
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) { 
html,body {
-webkit-overflow-scrolling : touch !important;
overflow: auto !important;
height: 100% !important;
}
}

I've actually been in contact with some webkit/apple devs on that ticket, and they confirmed their fix will resolve my issue. Thanks. — ThatTobMate, Dec 18 '17 at 16:33
@ThatTobMate - did they give you any idea on when it will be fixed? I've been working on resolving this bug for our site for over a day now. — Neal Jones, Jan 09 '18 at 23:36
@NealJones Hey they've claimed it's fixed but they don't have a schedule on release. See here https://bugs.webkit.org/show_bug.cgi?id=176896 — ThatTobMate, Jan 10 '18 at 13:46

score 0 · Answer 2 · answered Mar 24 '18 at 12:11

This solution helped me to fix in any IOS model.

How to fix the iOS 11 input element in fixed modals bug

I already explained in above urL but I will explain here also just in case...

First thing target only IOS devices with this code.

//target ios
var isMobile = {
  iOS: function() {
    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
  }
}
if(isMobile.iOS()) { 
  jQuery('body').addClass('apple-ios');
}

then put this code in your css:

body.apple-ios.modal-open {
  position: fixed;
  width:100%;
}

If you are using wordpress and cache plugin, you need to empty all the cache.

Hope this help you.

iOS 11 Fixed Modal Bug

2 Answers2