o2team/H5Skills

开启3D加速会让fixed失效

Opened this issue · 1 comments

在开发过程发现以下代码,fixed 会失效:

<div class="box">
    <p></p>
</div>
.box{width:200px; height:200px; border:1px solid #CCC; -webkit-transform:translateZ(0);}
.box p{position:fixed; left:10x; top:10px; width:50px; height:50px; background-color:#000;}

按照常规渲染逻辑,fixed是相对于浏览器窗口进行定位,但对父元素开启3D加速后,它的定位参考物变成了父元素。

在这个问题我也有类似的测试, 我的测试结果是在动画暂停的时候, position:fixed + top/bottom 才会导致各种布局失效 , left/right 却是正常的 , 怪怪的..

https://www.jianshu.com/p/dc64af28d841