如何修复固定模态bug中的iOS 11输入元素
新发布的iOS 11中的HTML输入中的错误为具有固定容器中的输入元素的网站带来了问题。 以下是正在发生的事情和一些可能的解决方法。
如果你有一个固定的容器并且它足够靠近屏幕的底部，迫使浏览器滚动以为键盘腾出空间，则光标将被放在文本输入之外。 这对我们来说是一个关键问题，因为我们的核心function之一依赖于通过固定modal dialog的用户输入。
这对我们来说是一个关键问题，因为我们的核心function之一依赖于通过固定modal dialog的用户输入。
目前还没有完美的解决方案。 两个临时选项：
- 将对话框/模态更改为
position: absolute（不推荐） - 尝试在模态/对话框打开时删除背景滚动，并在对话框关闭时恢复它。
选项2的详细信息：例如，您可以在对话框打开时将根div（或任何具有滚动条的设置）设置为overflowY='hidden' ，并在对话框关闭时将其更改为overflowY='' 。 （缺点：打开对话框/模态时，浏览器将滚动到顶部）
注意：
- 记得在触发器修复时检测OS /浏览器，否则你可能会在IE中遇到问题。
- 请按照此主题获取有关此问题的最新更新。
这个解决方案帮我修复了任何IOS模型。
首先，只使用此代码定位IOS设备。
//target ios var isMobile = { iOS: function() { return navigator.userAgent.match(/iPhone|iPad|iPod/i); } } if(isMobile.iOS()) { jQuery('body').addClass('apple-ios'); }
然后把这段代码放在你的css中：
body.apple-ios.modal-open { position: fixed; width:100%; }
如果您使用的是wordpress和缓存插件，则需要清空所有缓存。
希望这对你有所帮助。
我不确定这是否与您面临的问题完全相同，但此解决方案对我有用：
.modal-open {position：fixed;}
iOS 11 Safari引导模式文本区域位于游标外部
我有同样的问题，看看我的答案，也许它会帮助你： https ： //stackoverflow.com/a/46954486/8775824
这个解决方案帮助我解决了IOS11输入问题： https ：//bitbucket.org/snippets/OlegChulakovStudio/RgBX8x
它还修复了烦人的背景滚动，当你尝试滚动内部模式:)
摘要：你添加位置：固定到body，cash window.pageYOffset并在弹出关闭后滚动到兑现位置以防止移动到页面顶部。
我在这个iOS bugg中有一个fixed标题/横幅元素内的登录表单。 标题内有一个button ，用登录表单打开模态窗口。 实际模态窗口是absolute定位的，但标题/横幅元素是fixed 。
只用几行代码我就很容易解决了。 所以我正在做的是我将fixed容器更改为absolute容器，但只有当登录表单打开时，它才会使用输入标记进行魔术处理。
jQuery的：
$('.ios #mob-login').on('click', function(){ $('body').toggleClass('login-open'); });
CSS：
.ios body.login-open #banner-wrapper { position: absolute; }
所以现在固定的标题变得绝对。 如果是iOS，则仅在登录框打开时。
如果您遇到类似问题，这可能会解决您的问题。
PS。 你需要一个脚本来检测和编写类名ios / ios11到或类似的，但我不会在这篇文章中讨论。 你可以找到许多解决方案。
试试这可能会对你有所帮助
//HTML //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'); });
这个bug也会影响iframe输入，所以我相信我发现的修复也会对模态有所帮助。
所有需要做的就是将以下css应用于iframe中的输入。
input:hover { cursor: text }
这是一个例子： https ： //codepen.io/ryanoutloud/project/full/AEKGjj