移动端采坑:Position: fixed 在Safari上的Bug
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的更多相关文章
- 水平/竖直居中在旧版Safari上的bug
今天调了两个出现在旧版Safari上的layout bug. 它们最初是在同事的iPad上被发现的, 我在自己桌面上安装的Safari 5.1.7上也能够复现. Bug1: .vertical-cen ...
- vux,vue 苹果手机使用position:fixed有问题,如何解决
苹果手机真是各种坑,导致我都想摔手机呀,但没办法,用苹果的人太多,程序员还是继续在坑的路上行走! 上一篇文章介绍了一些组件,就是使用vux可以解决,苹果手机使用position:fixed的问题 给需 ...
- IOS7 position:fixed 定位问题
在IOS7下position:fixed定位会出一些bug. 输入框 focus 状态下 fixed会随之改变.参见该页面详细描述(http://www.cnblogs.com/zhangdaipin ...
- ios position:fixed 上滑下拉抖动
ios position:fixed 上滑下拉抖动 最近呢遇到一个ios的兼容问题,界面是需要一个头底部的固定的效果,用的position:fixed定位布局,写完测试发现安卓手机正常的,按时ios上 ...
- 移动端web页面使用position:fixed问题
在做移动端项目时,碰到一个很纠结的问题,头部固定的问题,一开始使用fixed,发现一系列的问题, 问题1:footer输入框 focus 状态,footer 被居中,而不是吸附在软键盘上部. 测试环境 ...
- 移动端position:fixed 解决方案
相信不少人做移动端项目的时候都会遇到position:fixed 的坑. 下面提供一个解决方法,不用引入任何其他的js库,纯css解决. 解决问题的关键就是:fixed元素内部必须嵌套一个positi ...
- Issues with position fixed & scroll(移动端 fixed 和 scroll 问题)
转载请注明英文原文及译文出处 原文地址:Issues with position fixed & scrolling on iOS 原文作者:Remy Sharp译文地址:移动端 fixed ...
- 移动端web页面使用position:fixed问题总结
近期完成了一个新的项目(搜狐直播),其中又涉及到了 fixed(固定位置定位)的问题,在之前的文章<移动Web产品前端开发口诀——“快”>中已经阐述过我对 iScroll 的态度,所以在这 ...
- 解决IOS safari在input focus弹出输入法时不支持position fixed的问题
该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position ...
随机推荐
- C# 多线程之List的线程安全问题
网上关于List的线程安全问题将的很少,所以自己实验了一把,发现确实是线程不安全的.所以当你在进行多线程编程中使用了共享的List集合,必须对其进行线程安全处理. List的Add方法是线程不安全的, ...
- C# 多线程六之Task(任务)三之任务工厂
1.知识回顾,简要概述 前面两篇关于Task的随笔,C# 多线程五之Task(任务)一 和 C# 多线程六之Task(任务)二,介绍了关于Task的一些基本的用法,以及一些使用的要点,如果都看懂了,本 ...
- SQL SERVICE日志收缩
ALTER DATABASE 数据库SET RECOVERY SIMPLE WITH NO_WAIT;ALTER DATABASE 数据库SET RECOVERY SIMPLE; --简单模式DBCC ...
- Jenkins使用TFS部署
之前发表过一篇Jenkins的文章 使用Jenkins部署.Net应用程序 里面是使用GIT做的版本管理 今天更新下使用TFS做版本管理 首先在插件管理中搜索tfs,我这里因为已经装了,所以在已安装列 ...
- tomcat 虚拟目录
在webapps同级目录 下建立一个webapps_abc的目录,将网站根目录abc文件夹放入webapps_abc目录下: 找到conf目录下的,server.xml文件,在service节点下添加 ...
- springMVC和json整合配置方法
一.配置方法一 1.导入第三方的jackson包,jackson-mapper-asl-1.9.13.jar和jackson-core-asl-1.9.13.jar 百度云链接:https://pan ...
- Solr 配置中文分词器 IK
1. 下载或者编译 IK 分词器的 jar 包文件,然后放入 ...\apache-tomcat-8.5.16\webapps\solr\WEB-INF\lib\ 这个 lib 文件目录下: IK 分 ...
- 数据存储之偏好设置NSUserDefaults
NSUserDefaults做数据存储也是比较常用,适合轻量级的本地数据存储,读取也很方便. 一.支持的数据类型如下图(NSString.NSArray.NSDictionary.NSData.NSI ...
- the first blog in 2017——《论作为程序员的我考研》
怎么说,人总是有了压力才有动力.想来如今已经是2017年2月13日,2017年已经使用了43天,距离成绩出来还有3天.这个过年是最不充实的一个年,也是时间长达一个月久的“寒假”,因为“考研”.至于考到 ...
- [转]RSReportServer 配置文件
本文转自:https://docs.microsoft.com/zh-cn/previous-versions/sql/sql-server-2005/ms157273(v=sql.90) 更新日期: ...