如果输入被聚焦,iOS7 Safari布局会在方向更改时中断
Dom*_*nic 9 html keyboard layout focus ios
似乎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:而不是考虑这是一个主要的错误苹果支持问我是否发生在iOS 8测试版上并将该错误标记为无排名.
<!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>
第一次聚焦时:
然后所有的地狱都破裂了,一直到<html>元素的宽度和红色的一样宽,很多网站正在消失在左边的空间(视图外,没有滚动条):
如果您进行方向更改然后再返回,浏览器会开始认为它是Inception电影中的主角:
那么..解决方案？我是否必须先听取方向更改并以编程方式将输入重点放在输入中之前？编辑:试过这个它不起作用(不够快).
我遇到了这个问题，但提出了一个可行的解决方案。
在关注输入字段时，在应用程序全局范围内创建对输入字段的引用（确保您稍后可以访问它）。我将默认值设置为 NULL。
在方向更改处理程序中检查引用是否不为 NULL，如果不是则执行 window.scroll(0,0)。在超时时间内执行另一个函数以滚动到该输入字段；window.scroll(0,activeInput.offset().top);
注意：我已将超时设置为大约 1000，这足以让浏览器“重绘”。我不喜欢这个，但它确实有效！
代码示例：
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();
希望这可以帮助！