New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

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

This comment has been minimized.

Show comment
Hide comment
@cssmagic

cssmagic Aug 2, 2013

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

cssmagic commented Aug 2, 2013

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

@maxzhang

This comment has been minimized.

Show comment
Hide comment
@maxzhang

maxzhang Aug 2, 2013

Owner

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

Owner

maxzhang commented Aug 2, 2013

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

@senyawang

This comment has been minimized.

Show comment
Hide comment
@senyawang

senyawang Aug 27, 2013

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

senyawang commented Aug 27, 2013

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

@jieyou

This comment has been minimized.

Show comment
Hide comment
@jieyou

jieyou Nov 6, 2013

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

jieyou commented Nov 6, 2013

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

@maxzhang

This comment has been minimized.

Show comment
Hide comment
@maxzhang

maxzhang Nov 6, 2013

Owner

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

Owner

maxzhang commented Nov 6, 2013

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

@petsa

This comment has been minimized.

Show comment
Hide comment
@petsa

petsa Nov 18, 2013

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

petsa commented Nov 18, 2013

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

@jieyou

This comment has been minimized.

Show comment
Hide comment
@jieyou

jieyou 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 代替”是什么用意呢?

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

This comment has been minimized.

Show comment
Hide comment
@maxzhang

maxzhang Nov 19, 2013

Owner

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

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

Owner

maxzhang commented Nov 19, 2013

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

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

@Dawn-King

This comment has been minimized.

Show comment
Hide comment
@Dawn-King

Dawn-King Dec 16, 2013

移动端一堆坑~~

Dawn-King commented Dec 16, 2013

移动端一堆坑~~

@petsa

This comment has been minimized.

Show comment
Hide comment
@petsa

petsa 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.

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

This comment has been minimized.

Show comment
Hide comment
@xijige

xijige Jun 24, 2014

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

xijige commented Jun 24, 2014

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

@haozi

This comment has been minimized.

Show comment
Hide comment
@haozi

haozi Jun 26, 2014

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

haozi commented Jun 26, 2014

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

@chaping

This comment has been minimized.

Show comment
Hide comment
@chaping

chaping Jul 15, 2014

mark一下,以后备用

chaping commented Jul 15, 2014

mark一下,以后备用

@acterce

This comment has been minimized.

Show comment
Hide comment
@acterce

acterce commented Jul 28, 2014

mark

@tabtang

This comment has been minimized.

Show comment
Hide comment
@tabtang

tabtang Aug 25, 2014

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

tabtang commented Aug 25, 2014

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

@adophper

This comment has been minimized.

Show comment
Hide comment
@adophper

adophper Aug 30, 2014

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

adophper commented Aug 30, 2014

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

@targetkiller

This comment has been minimized.

Show comment
Hide comment
@targetkiller

targetkiller commented Sep 29, 2014

mark

@ceyao

This comment has been minimized.

Show comment
Hide comment
@ceyao

ceyao commented Oct 22, 2014

mark

@yanhaijing

This comment has been minimized.

Show comment
Hide comment
@yanhaijing

yanhaijing commented Nov 3, 2014

mark

@ryanyu104

This comment has been minimized.

Show comment
Hide comment
@ryanyu104

ryanyu104 commented Nov 5, 2014

mark

@givebest

This comment has been minimized.

Show comment
Hide comment
@givebest

givebest commented Nov 14, 2014

mark

@togayther

This comment has been minimized.

Show comment
Hide comment
@togayther

togayther Nov 22, 2014

移动端总是不让人省心!

togayther commented Nov 22, 2014

移动端总是不让人省心!

@webx32

This comment has been minimized.

Show comment
Hide comment
@webx32

webx32 Nov 27, 2014

都是真机测试?

webx32 commented Nov 27, 2014

都是真机测试?

@hoosin

This comment has been minimized.

Show comment
Hide comment
@hoosin

hoosin commented Dec 1, 2014

mark

@luck99

This comment has been minimized.

Show comment
Hide comment
@luck99

luck99 Dec 12, 2014

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

luck99 commented Dec 12, 2014

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

@maxzhang maxzhang closed this Jun 18, 2015

@lwyi188

This comment has been minimized.

Show comment
Hide comment
@lwyi188

lwyi188 Mar 4, 2016

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

lwyi188 commented Mar 4, 2016

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

@dara89

This comment has been minimized.

Show comment
Hide comment
@dara89

dara89 Mar 28, 2016

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

dara89 commented Mar 28, 2016

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

@huboshu0819

This comment has been minimized.

Show comment
Hide comment
@huboshu0819

huboshu0819 commented Mar 31, 2016

mark

@zygmcc

This comment has been minimized.

Show comment
Hide comment
@zygmcc

zygmcc Aug 12, 2016

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

zygmcc commented Aug 12, 2016

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

@hazelGranger

This comment has been minimized.

Show comment
Hide comment
@hazelGranger

hazelGranger Aug 23, 2016

mark 一不小心入坑者 +1

hazelGranger commented Aug 23, 2016

mark 一不小心入坑者 +1

@majianxiong

This comment has been minimized.

Show comment
Hide comment
@majianxiong

majianxiong Aug 24, 2016

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

majianxiong commented Aug 24, 2016

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

@zhangyulins

This comment has been minimized.

Show comment
Hide comment
@zhangyulins

zhangyulins Aug 26, 2016

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

zhangyulins commented Aug 26, 2016

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

@majianxiong

This comment has been minimized.

Show comment
Hide comment
@Cyonet

This comment has been minimized.

Show comment
Hide comment
@Cyonet

Cyonet commented Sep 6, 2016

mark

@Mmzer

This comment has been minimized.

Show comment
Hide comment
@Mmzer

Mmzer commented Sep 13, 2016

m

@hichaozjp

This comment has been minimized.

Show comment
Hide comment
@hichaozjp

hichaozjp Oct 9, 2016

为什么没有解决方案

hichaozjp commented Oct 9, 2016

为什么没有解决方案

@Wangyunner

This comment has been minimized.

Show comment
Hide comment
@Wangyunner

Wangyunner Oct 11, 2016

mark and thanks

Wangyunner commented Oct 11, 2016

mark and thanks

@smithCaoyifei

This comment has been minimized.

Show comment
Hide comment
@smithCaoyifei

smithCaoyifei commented Oct 19, 2016

mark

@mengqing723

This comment has been minimized.

Show comment
Hide comment
@mengqing723

mengqing723 commented Feb 13, 2017

mark

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Feb 15, 2017

mark! By the way, is there any good solution yet?

ghost commented Feb 15, 2017

mark! By the way, is there any good solution yet?

@jianxiaoBai

This comment has been minimized.

Show comment
Hide comment
@jianxiaoBai

jianxiaoBai commented Mar 3, 2017

mark

@best-time

This comment has been minimized.

Show comment
Hide comment
@best-time

best-time commented Mar 10, 2017

mark

@guiqide

This comment has been minimized.

Show comment
Hide comment
@guiqide

guiqide commented Apr 12, 2017

mark

@Songkeys

This comment has been minimized.

Show comment
Hide comment
@Songkeys

Songkeys commented Jul 15, 2017

mark

@fiye2013

This comment has been minimized.

Show comment
Hide comment
@fiye2013

fiye2013 commented Jul 26, 2017

mark

@liuyiliuyi

This comment has been minimized.

Show comment
Hide comment
@liuyiliuyi

liuyiliuyi commented Oct 3, 2017

mark

@fanfanstyle

This comment has been minimized.

Show comment
Hide comment
@fanfanstyle

fanfanstyle Nov 29, 2017

怎么让底部吸附在软键盘上的?

fanfanstyle commented Nov 29, 2017

怎么让底部吸附在软键盘上的?

@wangmiaoduan

This comment has been minimized.

Show comment
Hide comment
@wangmiaoduan

wangmiaoduan Jan 29, 2018

还是 会会有错 线上地址 点击“发表”input输入框 出来界面空白 页面出现滚动 输入框内容在上面
image

wangmiaoduan commented Jan 29, 2018

还是 会会有错 线上地址 点击“发表”input输入框 出来界面空白 页面出现滚动 输入框内容在上面
image

@taodejin1

This comment has been minimized.

Show comment
Hide comment
@taodejin1

taodejin1 Sep 4, 2018

ios的fixed定位,遇到文本框focus唤起键盘时的兼容 真的坑啊, 安卓倒是表现很优异 ###

taodejin1 commented Sep 4, 2018

ios的fixed定位,遇到文本框focus唤起键盘时的兼容 真的坑啊, 安卓倒是表现很优异 ###

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