javascript - iOS 11 修复模态错误

Question

我有一个固定模式，其中有一些可滚动内容和一些输入字段。我遇到一个问题，我专注于输入字段，该字段会弹出键盘，然后滚动。 与屏幕上实际呈现的内容相比，DOM 元素似乎没有对齐。 请参阅屏幕截图 - 突出显示的区域应该是继续按钮所在的位置。这意味着我无法按预期单击“继续”。

我认为这可能是问题所在，但修复似乎并未完全发挥作用(在 iPhone X 上仍然无法正常工作)。

还有其他人遇到过此问题或已解决吗？

hackernoon.com/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8

Answer 1

是的，我遇到过这个错误。虽然并不完美，并且不适用于每个网站，但光标仍然有点偏出，但它至少在输入字段内，并且您可以在字段之间跳过...这是我的修复...

它还有助于使模态宽度为 100%。

我一直在关注此线程以获取 iOS 本身修复的更新，似乎它已经接近 - https://bugs.webkit.org/show_bug.cgi?id=176896

@media
only screen /* iPhone X */
and (device-width : 375px) 
and (device-height : 812px) 
and (-webkit-device-pixel-ratio : 3),
only screen /* iPhone 8 */
and (device-width : 375px) 
and (device-height : 667px) 
and (-webkit-device-pixel-ratio : 2),
only screen /* iPhone 8 Plus */
and (device-width : 414px) 
and (device-height : 736px) 
and (-webkit-device-pixel-ratio : 3),
only screen /* iPhone 7 */
and (min-device-width : 375px)
and (max-device-width : 667px), 
only screen /* iPhone 7 Plus */
and (min-device-width : 414px)
and (max-device-width : 736px),
only screen /* iPhone 6 */
and (min-device-width : 375px) 
and (max-device-width : 667px),
only screen /* iPhone 6 Plus */
and (min-device-width : 414px) 
and (max-device-width : 736px),
only screen /* iPhone 5 & 5S */
and (min-device-width : 320px) 
and (max-device-width : 568px),
only screen /* iPad */
and (min-device-width : 768px) 
and (max-device-width : 1024px),
only screen /* iPad 3 and 4 */
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2),
only screen /* iPad 1 and 2 */
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1),
only screen /* iPad Mini */
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) { 
html,body {
-webkit-overflow-scrolling : touch !important;
overflow: auto !important;
height: 100% !important;
}
}