移动端web页面使用position:fixed问题总结 #2

Closed
maxzhang opened this Issue Aug 1, 2013 · 48 comments

Projects

None yet
@maxzhang
Owner
maxzhang commented Aug 1, 2013

近期完成了一个新的项目(搜狐直播),其中又涉及到了 fixed(固定位置定位)的问题,在之前的文章《移动Web产品前端开发口诀——“快”》中已经阐述过我对 iScroll 的态度,所以在这个项目中我决定不使用 iScroll,使用 position:fixed 实现头部、底部模块定位。在使用fixed的过程中,遇到了一些的问题,并且部分问题无法找到较好的解决方案。下面我就将这些问题一一阐述,提供给大家参考。

正常界面

图中被红色选中区域为 position:fixed 元素

问题1:footer输入框 focus 状态,footer 被居中,而不是吸附在软键盘上部。

测试环境:iPhone 4s&5 / iOS 6&7 / Safari

### 问题2:页面底部,footer输入框失去焦点时,header定位出错。当页面有滚动动作时,header定位恢复正常。

测试环境:iPhone 4s&5 / iOS 6&7 / Safari

操作步骤:1、页面滚动到底部;2、选中底部输入框,使输入框进入focus状态;3、点击页面其他区域,使输入框失去焦点;

### 问题3:当页面发生跳转,再退回时,fixed区域消失,当内容获得焦点时,fixed区域才显示。

测试环境:iPhone 4 / iOS 5 / Safari(其他版本未发现此问题)

### 问题4:部分浏览器不支持 fixed。

测试环境:魅族MX2 / 自带浏览器(MX2上QQ、UC浏览器支持fixed,魅族的系统近期有过升级,更新之后自带浏览器就可以支持fixed

解决办法:使用 userAgent 检测,如果是魅族MX2自带浏览器则禁用 position:fixed,使用 position:relative 代替。
PS: iOS4 也是不支持 fixed 的。

### 问题5: 在滚屏过程中,fixed定位异常,touchend之后恢复正常。

测试环境:三星i9100(S2) / 自带浏览器(QQ、UC浏览器正常)

### 问题6: 部分低版本Android对支持不好,video poster属性设置的封面图会遮挡fixed元素。

测试环境:摩托罗拉ME525+ / Android 2.3.4 / 自带浏览器、QQ、UC浏览器

### 问题7: WP8下,QQ、UC浏览器滚动页面时footer定位错误,会往上偏移,是由于地址栏收起的缘故。

测试环境:Nokia Lumia920 / WP8 / UC、QQ(自带浏览器正常)

### 总结 - 在 android 手机下 fixed 表现要比 iOS 更好,软键盘弹出时,不会影响fixed元素定位; - 不要在 fixed 元素中使用 input / textarea 元素。

还是保留之前的态度,依然不推荐在 Android下使用 iScroll。在开发项目时,可以考虑分为两个版本:iOS下使用 iScroll的解决方案,Android下使用 position:fixed。

@cssmagic
cssmagic commented Aug 2, 2013

谢谢分享实战经验!仿 App 布局确实是一个头痛的问题。

@maxzhang
Owner
maxzhang commented Aug 2, 2013

搜狐直播v2.0已经上线,可以使用手机访问 http://zhibo.m.sohu.com 进行体验。

@senyawang

求楼主的解决方案。。。。。

@jieyou
jieyou commented Nov 6, 2013

请问,“Android下使用 position:fixed”,那楼主上面所提的Android上的那些问题最终是如何解决的?

@maxzhang
Owner
maxzhang commented Nov 6, 2013

@jieyou 在《 #8 》 4.2节里面有提到哦。
footer里面不直接放input,而是一个伪input,点击时弹出一个新层。

@petsa
petsa commented Nov 18, 2013

http://www.lungo.tapquo.com/ 虽然离最佳实践还有差那么一点,但这个框架实现滚动的方法应该是目前来说非常靠谱,可以研究一下

@jieyou
jieyou commented Nov 18, 2013

@maxzhang 谢谢。再请问一下,

“问题4:部分浏览器不支持 fixed。

测试环境:魅族MX2 / 自带浏览器(MX2上QQ、UC浏览器支持fixed,魅族的系统近期有过升级,更新之后自带浏览器就可以支持fixed)

解决办法:使用 userAgent 检测,如果是魅族MX2自带浏览器则禁用 position:fixed,使用 position:relative 代替。
PS: iOS4 也是不支持 fixed 的。”

假设页面有个header置于,在不支持position:fixed的安卓浏览器上,默认想到使用position:absolute,top:0或者不使用position:特殊属性,让它在正常文档流中吗?(即置于页面顶部而不是viewport的顶部,不随滚动而滚动),甚至是在touchend、scroll时重新计算位置。“使用 position:relative 代替”是什么用意呢?

@maxzhang
Owner

@jieyou 哈哈,是以前想的老方法,以前想着就是不支持就不支持咯,position:relative 让header回到文档流,因为使用position:absolute计算在滚动时候的效果不好。

另外,现在新的MX自带浏览器已经支持fixed了,MX1和MX2都自动升级了。

@Dawn-King

移动端一堆坑~

@petsa
petsa commented Dec 16, 2013

在深坑中,难以自拔ing,这是什么东西,怎么会发了这个邮件给我
1.建议需要fixed的页面都整个页面用iscroll模拟滚动条,然后absolute完成fixed效果
2.webkit-box弹性布局,然后overflow scroll,body添加-webkit-overflow-scrolling: touch,这个方法ios效果比较完美,安卓低版本滚动有明显卡顿

------------------ 原始邮件 ------------------
发件人: "Dawn-King";
发送时间: 2013年12月16日(星期一) 下午3:00
收件人: "maxzhang/maxzhang.github.com";
抄送: "petsa";
主题: Re: [maxzhang.github.com] 移动端web页面使用position:fixed问题总结 (#2)

移动端一堆坑~


Reply to this email directly or view it on GitHub.

@xijige
xijige commented Jun 24, 2014

fixed 爬不出来了。坑全在这里。

@haozime
haozime commented Jun 26, 2014

最近做了个和楼主一模一样的布局,掉坑里满是血。。。

@chaping
chaping commented Jul 15, 2014

mark一下,以后备用

@acterce
acterce commented Jul 28, 2014

mark

@tabtang
tabtang commented Aug 25, 2014

请问大神,滑过的时候,浏览器自带导航或地址栏把定位层遮住了,这怎么解决?

@adophper

请问一下解决方法是什么 ?

@targetkiller

mark

@ceyao
ceyao commented Oct 22, 2014

mark

@yanhaijing

mark

@ryanyu104

mark

@givebest

mark

@togayther

移动端总是不让人省心!

@webx32
webx32 commented Nov 27, 2014

都是真机测试?

@hoosin
hoosin commented Dec 1, 2014

mark

@luck99
luck99 commented Dec 12, 2014

最近做项目遇到一个问题,页面中有,点击页面上的某个按钮,弹出一个弹出框和一个遮罩(用fixed)居中显示,这个弹框中有,当input获得焦点输入的时候,手在input按住不放,上下滑动,当弹框中的input正好和页中的input重合的时候,会看到页面中的input,松开后弹框中的input会得到页面中input的值,请各位有时间看看

@maxzhang maxzhang closed this Jun 18, 2015
@lshnltt
lshnltt commented Jul 17, 2015

这些问题时怎么解决的呢?

@noney
noney commented Nov 18, 2015

mark

@iamcco
iamcco commented Nov 24, 2015

mark

@landerqi

mark

@babylonyao

make

@evilemon

问题2怎么解决的

@Megasu
Megasu commented Jan 25, 2016

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

@tarymee
tarymee commented Feb 23, 2016

mark

@ystarlongzi

+1

@sqxieshuai

mark

@lwyi188
lwyi188 commented Mar 4, 2016

iOS, fixed定位元素 ,在完成所有操作之后出现定位问题,可以尝试调用一次 window.scrollTo(0,0), 模拟手动滑动。

@LoeiFy LoeiFy referenced this issue in youmi/tech-blog Mar 27, 2016
Closed

前端周刊-第11期-160327 #5

@dara89
dara89 commented Mar 28, 2016

楼上的大神。可以尝试调用一次 window.scrollTo(0,0)。这个有具体的例子吗?不太明白

@LoeiFy LoeiFy referenced this issue in youmi/weekly Mar 29, 2016
Open

前端周刊 - 第12期 - 160327 #1

@huboshu0819

mark

@zygmcc
zygmcc commented Aug 12, 2016

现在也入坑了,浑身上下都是血

@hazelGranger

mark 一不小心入坑者 +1

@majianxiong

@maxzhang 请问在 iframe Safari iphone 下 not fixed 怎么解决

@zhangyulins

请问,问题一是怎么解决的????

@Cyonet
Cyonet commented Sep 6, 2016

mark

@Mmzer
Mmzer commented Sep 13, 2016

m

@hichaozjp

为什么没有解决方案

@Wangyunner

mark and thanks

@smithCaoyifei

mark

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment