如果输入被聚焦，iOS7 Safari布局会在方向更改时中断

时间：2014-07-30 15:33:05

标签： html ios layout keyboard focus

似乎iOS7 iphone / ipad以及可能/可能的其他版本存在根本性的破坏。

如果您专注于输入字段以使键盘处于打开状态，则布局会在方向更改时以可怕且不可恢复的方式中断。它与css无关我只添加它以便可以更清楚地看到问题。

更改方向返回会修复布局，但我找不到其他方法。

演示

要在iPad / iPhone上加载：http://dominictobias.com/ios-layout-bug/

更新：仅在元视口中以 maximum-scale = 1 打破，当您更改方向时停止Safari放大。

更新2：以下是元视口的另一个有趣的错误：

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

如果你这样做并改变方向，它会放大然后你不能缩小并再次看到整个网站 - 即使刷新也不起作用。您必须创建一个新选项卡才能恢复到正常的缩放级别。

更新3：而不是将此视为一个主要错误Apple支持人员问我是否在iOS 8测试版上发生，并将该错误标记为No Rank。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>iOS7 Layout break</title>

    <style>
    body {
        background-color: red;
        margin: 0;
        padding: 0;
    }
    .container {
        background-color: black;
    }
    .inner-container {
        max-width: 75%;
        margin: 0 auto;
        padding: 30px;
        background-color: white;
    }
    </style>
</head>
<body>

<div class="container">
    <div class="inner-container">
        <p>When you focus in on this field and change orientation, iOS7 (possibly other versions) will completely break by rendering some of the content off screen on the left and there seems to be no way to fix it by causing a repain - the node tree all the way up to the root thinks the width of the browser is now less than it was..</p>
        <input type="text">
    </div>
</div>

</body>
</html>

首次关注时：

At first when focused in

然后一切都崩溃了，一直到<html>元素的宽度和红色的一样宽，很多网站正在消失在左边的空间中（在视图外，没有滚动条）：< / H3>

All hell breaks loose on orientation change

如果您进行方向更改然后再返回，浏览器会开始认为它是Inception电影中的主要角色：

enter image description here

那么..解决方案？我是否必须先听取方向更改并以编程方式将输入重点放在输入中之前？ 编辑：尝试过此功能无效（不够快）。

1 个答案:

答案 0 :(得分：2)

我遇到了这个问题，但提出了一个看似合理的解决方案。

  • 在关注应用程序全局范围时，创建对应用程序全局范围内输入字段的引用（确保以后可以访问它）。我将默认值设置为NULL。

  • 在方向更改处理程序中检查引用是否为NULL，如果不是则执行 window.scroll（0,0）。在超时中执行另一个函数以滚动到该输入字段; window.scroll（0，activeInput.offset（）顶部。）;

注意：我已将超时设置为大约1000，这足以让浏览器重新＆＃34;重绘＆＃34;。我不喜欢这个，但它有效！

代码示例：

var activeInput = null;
$(":input").focusin(function (e) {
    activeInput = $(this);
});
$(window).orientationChange(function(){
   if(activeInput!=null)window.scroll(0,0);
   setTimeout(function(){window.scroll(0,activeInput.offset().top},100);
});

如果您不在乎用户是否丢失了键盘，则另一种解决方案是：

$(":input").blur(function (e) {
    window.scroll(0,0);
});
$(":input").focusout(function (e) {
    window.scroll(0,0);
});
activeInput.blur();

希望这有帮助！

相关问题
最新问题