Question

我正在使用Zurb Foundation并在iPad上遇到一个奇怪的错误。当我在横向视图中启动，关注文本输入，然后将设备从横向旋转到纵向时，会出现此缺陷。

视口设置为：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>

当我在Web检查器中查看DOM时，右边的毛刺区域根本没有显示。我试图在html和body元素上添加overflow-x: hidden;，但仍然没有运气。我不确定这是我的问题，Zurb问题还是iPad问题。任何建议都将不胜感激。

Defect Image http://i57.tinypic.com/2ccxef5.png

Answer 1

尝试将此CSS添加到包含的表单中：

-webkit-backface-visibility: hidden;
backface-visibility: hidden;

如果没有这样做，请尝试将这些规则移到表单的父级等。

这解决了我遇到的与正确重绘的表单字段有关的类似问题。像这样的Hacky解决方法让我非常喜欢webdev！

Answer 2

我遇到了同样的问题。当iPad的页面小于窗口/视口并且你在旋转时打开键盘时，它是iPad（可能是所有iOS）的一个错误...它不知道如何处理它。哈哈。

以下是我用 jQuery

修复我的方法

jQuery(function($) {
    var iPad = navigator.userAgent.toLowerCase().indexOf("ipad");

if(iPad > -1) {
    $('body').css({'min-height':($(window).height())});
}

修复了我的问题。没有更奇怪的黑匣子或破碎的页面。让我知道它是怎么回事！

将iPad从横向旋转到纵向，并以文本输入为焦点

2 个答案: