小虾虎鱼

小虾虎鱼

UC9.0浏览器处理定位的问题(BUG)

作者 禾惠 发表于 2013/05/25,最后修改于 2013/05/25

以前在用UC9.0浏览器打开网页时,发现有些网页中使用绝对定位的元素会随着页面的滚动而动直到页面停止才回到固定位置,一开始以为所有的浏览器都是这样子的,直到这几天开始做手机版的网站发现原来这是UC浏览器的问题,使用谷歌浏览器、百度浏览器、QQ浏览器、海豚浏览器都是静止不动,与PC版浏览器一直。

在开发的过程中还发现有这样一个情况(例子一),先看下代码:

<body>
<p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> 
<div class="box">
    <div class="box-in">
        <div class="box-inner"></div>
    </div>
</div>
</body>


.box{position:fixed;bottom:0; left:100px;width:100px;background:#ccc; height:100px;}
.box-in{position:absolute;top:0;left:0; width:20px;height:20px; background:red;}
.box-inner{position:absolute;top:0; left:-10px;width:10px;height:10px; background:green;}

将上面的代码放在网页中,然后用UC打开会发现:从顶部开始滚动页面时,红色背景一直相对于灰色背景静止,而绿色背景与灰色背景相对屏幕有偏移而非静止在底部,并且,绿色背景相对灰色背景不是静止的。

再将HTML代码改成这样(例子二):

<div class="box">
    <div class="box-in"></div>
    <div class="box-inner"></div>
</div>

用UC打开后会发现与上面唯一不同的就是三个背景都是相对静止的,相对屏幕有偏移。其他浏览器都正常。


经过反复的测试,最后终于找到原因了(应该属于UC浏览器的BUG):

1、如果在没有启用全屏情况下会发现灰色背景每次偏移的高度 等于 UC浏览器顶部的地址栏的高度,而且出现偏移就是刚从顶部往下滚动的时候,如果页面静止且地址栏隐藏了,再滚动页面就不会出现偏移的情况,该情况与例子二符合。

2、在例子一中,与上面描述的稍微有点偏差,就是灰色与红色背景都是相对屏幕静止,而绿色背景似乎是相对于body定位的(很诡异),难道absolute不能继承absolute?