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. 一眼看穿flatMap和map的区别

    背景 map和flatmap,从字面意思或者官网介绍,可能会给一些人在理解上造成困扰[包括本人],所以今天专门花时间来分析,现整理如下: 首先做一下名词解释---------------------- ...

  2. java项目日志写到logstash-TCP/UDP

    好处:项目日志写到logstash,然后发送到ElasticSearch,可以方便查看搜索日志,还可以做报表分析. logstash是一个数据采集工具,有多种渠道,比如文件,tcp,udp等,如果是采 ...

  3. nodejs结合apiblue实现MockServer

    apiblue功能很强大,里面支持很多插件,这些插件能够为restfulAPI提供接口文档自动生成,甚至Mockserver的功能,当然,好多插件还是有很多坑的.下面用apiblue实现下面的业务需求 ...

  4. sql字符处理

    --Description: 字符处理 --使用: 放到查询分析器里执行就可以了 --示例: select * from dbo.splitstr('12 44 45 50 56 87',' ') o ...

  5. Collections.sort()中的mergeSort归并排序

    @SuppressWarnings({"unchecked", "rawtypes"}) private static void mergeSort(Objec ...

  6. php还原16进制特殊字符

    特殊字符的16进制表:https://websitebuilders.com/tools/html-codes/ascii/ 可以通过 hexdec() 和 chr()方法来进行转换, 例子: < ...

  7. Tomcat学习总结（7）——Tomcat与Jetty比较

    Jetty 基本架构 Jetty目前的是一个比较被看好的 Servlet 引擎,它的架构比较简单,也是一个可扩展性和非常灵活的应用服务器. 它有一个基本数据模型,这个数据模型就是 Handler(处理 ...

  8. KMP算法中next数组的理解与算法的实现（java语言）

    KMP 算法我们有写好的函数帮我们计算 Next 数组的值和 Nextval 数组的值,但是如果是考试,那就只能自己来手算这两个数组了,这里分享一下我的计算方法吧. 计算前缀 Next[i] 的值: ...

  9. centos7之使用最新版的kubeadm体验k8s1.12.0

    1.环境准备 centos7 .docker-ce18.06.1-ce.kubeadm.kubelet.kubectl 2.安装 yum安装,准备repo文件 docker: [docker-ce-s ...

  10. 布局中的BFC---重点是前言

    一.前言 说实话,听到BFC这个概念我心里一阵咯噔,这到底是什么?有种似曾相识的感觉,但是又很模糊.问了一下度娘,看到张鑫旭的<CSS深入理解流体特性和BFC特性下多栏自适应布局>.呀,原 ...