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

问题描述

在某个线上网站,电商网站,当进入确定订单页面,填写买家留言以后,页面跳转到订单支付页面,下面的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;就可以实现效果,无需插件。可拷贝下面代码运行。


<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是有修复作用的。

你可能感兴趣的:(技术,前端)