如何修复固定模式错误中的iOS 11输入元素 [英] How to fix the iOS 11 input element in fixed modals bug

问题描述

新发布的iOS 11中HTML输入中的错误正在为具有固定容器中的输入元素的网站造成问题.这就是正在发生的事情以及一些可能的解决方法.

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.

推荐答案

目前，还没有没有完美的解决方案.两个临时选项:

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

1. 将对话框/模式更改为position: absolute(不推荐)
2. 尝试在模式/对话框打开时删除背景滚动，并在对话框关闭时恢复背景滚动.

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

选项2的详细信息:例如，您可以在对话框打开时将根div(或具有滚动条的任何内容)设置为overflowY='hidden'，并在对话框关闭时将其更改回overflowY=''. (缺点:打开对话框/模式时浏览器将滚动到顶部)

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)

注意:

1. 切记在修复触发器后检测OS/浏览器，否则您可能会在IE中遇到问题.
2. 按照此线程来获取有关此问题的最新更新.
li>

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

这篇关于如何修复固定模式错误中的iOS 11输入元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！