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

Answer 2

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

如何修复固定模式错误中的iOS 11输入元素

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

希望这对您有所帮助。