您的位置：首页 > 其它

苹果全系列fixed定位bug检测报告

2016-06-16 18:59 471 查看

问题描述

在某个线上网站，电商网站，当进入确定订单页面，填写买家留言以后，页面跳转到订单支付页面，下面的fixed定位的支付按钮就会消失，该问题烦恼了很久，于是。。

百度之：

这几天遇到了一个比较坑爹的问题，曾经比较好用的position:fixed;属性竟然在IOS 7.0系统中成了BUG，当同事跟我说这个问题的时候我纠结半天，开始以为只是iPhone 5中的7.0有这个问题，后来竟然发现所有IOS 7都存在此问题，传说要到7.3才修复，就目前态势来说估计是得到8.0才会修复了。

先说问题：
如果你想点击某个按钮，然后出现一个新的DIV层，为了让DIV层占据在固定位置，无论您如何滚动始终在那里。一直都是用position:fixed;来实现。这已经是用烂了的方法了，可惜IOS 7不买账。当你在A层级有input输入框的时候，而且输入框处于获得焦点状态，也就是键盘是打开的。当你点击某个按钮想让B层出现的时候，input会失去焦点，同时键盘关闭，B层出现。这个时候如果你B层是top:0;而且是position:fixed;那么恭喜你，界面混乱了，这个时候你只需要上下滑动下就会恢复为正常状态。可是。。。我想这样的界面我想没人想看到。

谷歌度娘查了下，有人说把
meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"
替换为：
meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi"

就能解决问题，可是我尝试了还是不行。不知道是什么问题，最后我也尝试让input失去焦点。问题依旧！最后，我只能将position设置为absolute绝对定位，然后B层出现后在附加一个滚动条滚动事件。。。

如果哪位大虾有别的好方法还望留言指导下！！！


参考: Quick jQuery hack to fix position:fixed toolbars in iPhone/iPad/iPod Touch
在IPhone,IPad页面使用position: static;，如果用了jQuery，上面的文章提供了代码:
JavaScript code

?
1
2
3
4
5
//stick the footer at the bottom of the page if we're on an iPad/iPhone due to viewport/page bugs in mobile webkit
if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod')
{
$("#footer").css("position", "static");
};


4，重点来了：
只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;overflow:scroll;就可以实现效果，无需插件。可拷贝下面代码运行。
<!DOCTYPE html>

<html lang="zh_cmn">

<head>

<meta charset=utf-8 />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

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

<title></title>

<style>

.head,.foot{position:fixed;left:0;height:38px;line-height:38px;width:100%;background-color:#99CC00;}

.head{top:0;}

.foot{bottom:0;}

.main{position:fixed;top:38px;bottom:38px;width:100%;overflow:scroll;background-color:#BABABA;}

</style>

</head>

<body>

<header class="head">顶部固定区域</header>

<article class="main"  id="wrapper">

<div>

<p>当内容欲出隐藏时，灰色区域可上下拖动</p>

<p>当内容欲出隐藏时，灰色区域可上下拖动</p>

<p>当内容欲出隐藏时，灰色区域可上下拖动</p>

<p>当内容欲出隐藏时，灰色区域可上下拖动</p>

<p>当内容欲出隐藏时，灰色区域可上下拖动</p>

<p>当内容欲出隐藏时，灰色区域可上下拖动</p>

<p>当内容欲出隐藏时，灰色区域可上下拖动</p>

<p>当内容欲出隐藏时，灰色区域可上下拖动</p>

<p>当内容欲出隐藏时，灰色区域可上下拖动</p>

<p>当内容欲出隐藏时，灰色区域可上下拖动</p>

<p>当内容欲出隐藏时，灰色区域可上下拖动</p>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

content <br>

content <br>

content <br>

content <br>

content <br>

content <br>

content <br>

content <br>

content <br>

</div>

</article>

<footer class="foot">底部固定区域</footer>

</body>

</html>
当小键盘出现时头部、底部自动跳到页面最顶端、最底端。键盘隐藏时又会固定在头部，底部。顿时感觉开朗了


解决方案

其中：

overflow:scroll;


加上这个样式对ios的bug是有修复作用的。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航