iOS 11修复的模式错误

Question

我有一个固定的模式，有一些可滚动的内容和一些输入字段。我遇到了一个问题，我把焦点放在弹出键盘的输入栏上，然后滚动。与屏幕上实际呈现的内容相比，DOM元素似乎没有对齐。查看屏幕截图-突出显示的区域应该是continue按钮所在的位置。这意味着我不能按预期单击continue。

我认为这可能是问题所在，但是修复似乎并没有完全奏效(在iPhone X上仍然失效)。

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

​

Answer 1

是的，我经历过这个bug。这是我的办法..。

这也有助于使模式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模型的问题。

How to fix the iOS 11 input element in fixed modals bug

我已经在上面的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和缓存插件，你需要清空所有的缓存。

希望这能对你有所帮助。