Position: fixed 在IOS上的显示效果

会出现两种情况:

  • 点击fixed定位的元素会出现fixed定位失效导致的元素贴向底部，即position: absolute，bottom: 0px;的情况

  • 点击fixed定位的元素，元素向上移，定位生效，位置偏移大

解决方案 - 仅针对Safari

给fixed定位元素设置一个点击事件，在点击事件会调函数中加入 window.scrollTo(0, document.body.scrollHeight); (将页面视口定位至页面底部)，然后改变改定位元素的css class，把 position: fixed ==> position: absolute，这样，我们就可以很快的解决fixed定位导致的前两类Bug，当然，如果定位元素是Input标签，别忘了增加 blur 事件在失去聚焦后把css class改回。

其他解决方案

http://efe.baidu.com/blog/mobile-fixed-layout/

移动端采坑：Position: fixed 在Safari上的Bug的更多相关文章

  1. 水平/竖直居中在旧版Safari上的bug

    今天调了两个出现在旧版Safari上的layout bug. 它们最初是在同事的iPad上被发现的, 我在自己桌面上安装的Safari 5.1.7上也能够复现. Bug1: .vertical-cen ...

  2. vux，vue 苹果手机使用position:fixed有问题，如何解决

    苹果手机真是各种坑,导致我都想摔手机呀,但没办法,用苹果的人太多,程序员还是继续在坑的路上行走! 上一篇文章介绍了一些组件,就是使用vux可以解决,苹果手机使用position:fixed的问题 给需 ...

  3. IOS7 position:fixed 定位问题

    在IOS7下position:fixed定位会出一些bug. 输入框 focus 状态下 fixed会随之改变.参见该页面详细描述(http://www.cnblogs.com/zhangdaipin ...

  4. ios position:fixed 上滑下拉抖动

    ios position:fixed 上滑下拉抖动 最近呢遇到一个ios的兼容问题,界面是需要一个头底部的固定的效果,用的position:fixed定位布局,写完测试发现安卓手机正常的,按时ios上 ...

  5. 移动端web页面使用position:fixed问题

    在做移动端项目时,碰到一个很纠结的问题,头部固定的问题,一开始使用fixed,发现一系列的问题, 问题1:footer输入框 focus 状态,footer 被居中,而不是吸附在软键盘上部. 测试环境 ...

  6. 移动端position:fixed 解决方案

    相信不少人做移动端项目的时候都会遇到position:fixed 的坑. 下面提供一个解决方法,不用引入任何其他的js库,纯css解决. 解决问题的关键就是:fixed元素内部必须嵌套一个positi ...

  7. Issues with position fixed & scroll（移动端 fixed 和 scroll 问题）

    转载请注明英文原文及译文出处 原文地址:Issues with position fixed & scrolling on iOS 原文作者:Remy Sharp译文地址:移动端 fixed ...

  8. 移动端web页面使用position:fixed问题总结

    近期完成了一个新的项目(搜狐直播),其中又涉及到了 fixed(固定位置定位)的问题,在之前的文章<移动Web产品前端开发口诀——“快”>中已经阐述过我对 iScroll 的态度,所以在这 ...

  9. 解决IOS safari在input focus弹出输入法时不支持position fixed的问题

    该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position ...

随机推荐

  1. (转)9 db2trc案例2（1,2）

    原文:http://book.51cto.com/art/200906/130068.htm 9.3.3  db2trc案例2(1) 在AIX操作系统上,系统原先运行良好,而后用户从DB2 V8 FP ...

  2. Python：SQLMap的工作流程

    流程图 代码解析 后面补充…… 版权 作   者:曾是土木人 新浪微博:http://weibo.com/cstmr 转载请注明出处:http://www.cnblogs.com/hongfei/p/ ...

  3. android studio jni调用入门

    一.开发环境配置: 1.Android Studio 2.3.3 2.android-ndk-r14b-windows-x86_64 二.创建项目 1.新建android项目 2.新建文件 3.编译生 ...

  4. Hive执行过程中出现Caused by ： java.lang.ClassNotFoundException: org.cloudera.htrace.Trace的错误解决办法（图文详解）

    不多说,直接上干货! 问题详情 如下 这个错误的意思是缺少 htrace-core-2.04.jar. 解决办法: 将$HBASE_HOME/lib下的htrace-core-2.04.jar拷贝到$ ...

  5. map的容量的获取

    在go语言中,有两个内建函数分别是len(),cap(),前者用于获取容器的具体内容个数,后者用于获取容器分配的容量大小,但是这个cap对象是不能获取到map具体分配的容量大小的.有没有办法获取到呢, ...

  6. es-03-DSL的简单使用

    以下操作在kibana中进行, 如果在linux的shell中, 请使用 curl -Xget 'http://node1:9200/index/type/id' -d '{ ... }' 的形式, ...

  7. dig命令详解

    dig命令是常用的域名查询工具,可以用来测试域名系统工作是否正常 语法 dig(选项)(参数) 选项 @<服务器地址>:指定进行域名解析的域名服务器: -b<ip地址>:当主机 ...

  8. MYSQLI_USE_RESULT or MYSQLI_STORE_RESULT

    之前都是使用同事封装好的mysql类,今天做性能测试时自己手动编写了查询mysql的操作.偶然发现mysqli::query(或者mysqli_query)有一个参数$resultmode取值为MYS ...

  9. A Personal Understanding to Matrix Transformation in Graphics

    A Personal Understanding to Matrix Transformation in Graphics--------------------------------------- ...

  10. docker搭建rabbitmq

    Docker部署rabbitmq 1.     准备docker环境: # yum  -y  install  docker # docker ps @如果有输出 CONTAINER ID   IMA ...