可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

A bug in HTML inputs in the newly released iOS 11 is creating problems for websites that have input elements in fixed containers. Here is exactly what is happening and some possible workarounds.

If you have an in an fixed container and it is close enough to the bottom of the screen forcing the browser to scroll to make room for the keyboard, the cursor is put outside of the text input. This was a critical problem for us since one of our core functionalities relies on the user input through a fixed modal dialog.

This was a critical problem for us since one of our core functionalities relies on the user input through a fixed modal dialog.

回答1:

For now there is no perfect fix for it. Two temporary options:

Change dialog/modal to position: absolute (Not recommended)
Try to remove background scrolling when modal/dialog opens and restore it when dialog close.

Detail for option 2: For example, you can set your root div (or whatever that has a scrollbar) as overflowY='hidden' when dialog opens, and change it back overflowY='' when dialog closes. (Drawback: browser will be scrolled to top when you open dialog/modal)

Note:

Do remember to detect OS/browser when trigger fixes, otherwise you will probably encounter problem in IE.
Follow this thread to get the newest update about this issue.

回答2:

This solution helped me to fix in any IOS model.

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.

回答3:

I'm not sure if this is exactly the same issue you are facing, but this solution worked for me:

.modal-open {position:fixed;}

iOS 11 Safari bootstrap modal text area outside of cursor

回答4:

I had the same issue, take a look at my answer, maybe it will help you: https://stackoverflow.com/a/46954486/8775824

回答5:

This solution helped me to fix IOS11 input problem: https://bitbucket.org/snippets/OlegChulakovStudio/RgBX8x

It also fixes annoying background scroll, when you try to scroll inside modal :)

Summary: You add position:fixed to body, cash window.pageYOffset and scroll to cashed position after popup close to prevent movement to the page top.

回答6:

I had this iOS bugg with a login form inside a fixed header/banner element. There is a button inside the header to open the modal window with the login form. The actual modal window is absolute positioned, but the header/banner element is fixed.

I solved it quite easy with just a few rows of code. So what I am doing is that I am changing the fixed container to absolute, but only when the login form is open, it makes the magic with the input marker.

jQuery:

$('.ios #mob-login').on('click', function(){
  $('body').toggleClass('login-open');
});

CSS:

.ios body.login-open #banner-wrapper {
  position: absolute;
}

So now the fixed header becomes absolute. If it is iOS and only when the login box is open.

This might solve your problem if you have a similar problems.

Ps. You need a script to detect and write the class name ios/ios11 to <html> or similar, but I am not going into that in this post. You can find many solutions for that out there.

回答7:

Try this it may help you

//HTML
<head>
     <style>
          .ios-11-body-fixed {
             position: fixed;
             width: 100%;
          } 
     </style>
</head>

//jQuery
$("#leadgen-modal").on('show.bs.modal', function () {
    $('body').addClass('ios-11-body-fixed');
});
$('#leadgen-modal').on('hidden.bs.modal', function () {
           $('body').removeClass('ios-11-body-fixed');
});