如何在固定模态错误中修复 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. 尝试在模式/对话框打开时移除背景滚动，并在对话框关闭时恢复它.

选项 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. 请记住在触发修复时检测操作系统/浏览器，否则您可能会在 IE 中遇到问题.
2. 关注此线程，获取有关此问题的最新更新.李>

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屋！