iOS 11修复了Modal Bug

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;
}
}

Answer 2

此解决方案帮助我修复了任何IOS模型。

StackBlitz

我已在上面的urL中解释过，但我会在这里解释一下以防万一...

首先，只使用此代码定位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和缓存插件，则需要清空所有缓存。

希望这对你有所帮助。