How to fix the iOS 11 input element in fixed modal

2020-02-11 21:45发布

站内问答 / jQuery
1784 8 5

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.

enter image description here

8条回答
倾城　Initia
2楼-- · 2020-02-11 22:03

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

查看更多
0人赞 添加讨论(0) 举报
男人必须洒脱
3楼-- · 2020-02-11 22:03

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.

查看更多
0人赞 添加讨论(0) 举报
放我归山
4楼-- · 2020-02-11 22:09

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.

查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
5楼-- · 2020-02-11 22:10

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

查看更多
0人赞 添加讨论(0) 举报
劳资没心，怎么记你
6楼-- · 2020-02-11 22:14

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.

查看更多
0人赞 添加讨论(0) 举报
狗以群分
7楼-- · 2020-02-11 22:17

This bug also affects iframe inputs, so I believe the fix I found will also help with modals.

All that needs to be done is to apply a the following css to the input within the iframe.

input:hover {
   cursor: text
}

Here's an example: https://codepen.io/ryanoutloud/project/full/AEKGjj

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)