iOS 11 修复了模态错误答案

【问题标题】：iOS 11 Fixed Modal BugiOS 11 修复了模态错误
【发布时间】：2018-05-25 21:37:07
【问题描述】：

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

我认为这可能是问题所在，但修复似乎没有完全奏效（在 iPhone X 上仍然损坏）。

有没有其他人遇到过这个问题或得到了修复？

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

【问题讨论】：

更新：这已被确认为 iOS 错误，将在即将发布的版本中修复。看这里：bugs.webkit.org/show_bug.cgi?id=176896
Apple 并不急于解决这个问题。
该修复已在 11.3 beta 版本中得到确认。所以它只是一个等待游戏，直到它完全发布。

标签： javascript ios css reactjs safari

【解决方案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;
}
}

【讨论】：

我实际上已经与该票证上的一些 webkit/apple 开发人员取得了联系，他们确认他们的修复将解决我的问题。谢谢。
@ThatTobMate - 他们有没有告诉你什么时候修复它？一天多来，我一直在努力为我们的网站解决这个错误。
@NealJones 嘿，他们声称它已修复，但他们没有发布时间表。见这里bugs.webkit.org/show_bug.cgi?id=176896

【解决方案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和缓存插件，则需要清空所有缓存。

希望对您有所帮助。

【讨论】：