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. mac mysql5.5升级5.7记录

    先删除当前的mysql文件 打开终端窗口 使用mysqldump备份你的数据库将文本文件! 停止数据库服务器 sudo rm /usr/local/mysql sudo rm -rf /usr/loc ...

  2. JAVA进阶之路（一）

    初学的大三奋斗者,fighting!!! 下面是进阶之路 Java平台和语言最开始只是SUN公司在1990年12月开始研究的一个内部项目.SUN公司的一个叫做帕特里克·诺顿的工程师被自己开发的C和C语 ...

  3. docker-使用ali云加速

    ali专用网络加速地址; https://yq.aliyun.com/articles/29941 使用ali加速 vim /etc/sysconfig/docker 添加: ADD_REGISTRY ...

  4. Linux 中计划任务-at-cron

    概念-计划任务:在某个时段自动执行某个任务  at:只执行一次 语法:at   时间 服务:atd   必须开启 如没有:yum install at -y 查看服务状态是否开启  systemctl ...

  5. HTML 框架 frameset，frame

    通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面.每份HTML文档称为一个框架,并且每个框架都独立于其他的框架 框架结构标签(<frameset>) 框架结构标签(<fram ...

  6. Spring AOP介绍及源码分析

    转自:http://www.uml.org.cn/j2ee/201301102.asp 软件开发经历了从汇编语言到高级语言和从过程化编程到面向对象编程:前者是为了提高开发效率,而后者则使用了归纳法,把 ...

  7. UVA 227 Puzzle（基础字符串处理）

    题目链接: https://cn.vjudge.net/problem/UVA-227 /* 问题 输入一个5*5的方格,其中有一些字母填充,还有一个空白位置,输入一连串 的指令,如果指令合法,能够得 ...

  8. 控制器中获取Field值

    在ASP.NET MVC程序中,我们需要POST Data到制器中,是有很多方法.但是我们想在控制器中,获取Feild值呢?怎样获取?你可以留意到有一个类FormCollection.它能帮助到我们解 ...

  9. 15.C++-操作符重载、并实现复数类

    首先回忆下以前学的函数重载 函数重载 函数重载的本质为相互独立的不同函数 通过函数名和函数参数来确定函数调用 无法直接通过函数名得到重载函数的入口地址 函数重载必然发生在同一个作用域中 类中的函数重载 ...

  10. Android-Binder机制

    http://www.jianshu.com/p/af2993526daf https://www.jianshu.com/u/e347b97e2f0c 上面这篇文章讲得很清楚.以下我的一些理解: 还 ...