首页 > 代码库 > position:fixed之safari的坑
position:fixed之safari的坑
mobile开发如今已经越来越步入正规,很多问题也得到了各大浏览器厂商的支持和修正,比如今天要说的ipone下的fixed,如今Safari也的得到了支持,不过却还有些比较坑得地方。
今天要说得这个坑是关于safari全屏模式,当页面进入全屏模式(向下滚动以后页面默认会进入全屏模式)时页面底部就不可交互,看起来好像事件失效了一样,这个是时候窗口底部的任何工具栏,链接或者通过fixed底部固定的工具栏等等都没法点击了,这时点击只会触发Safari退出全屏得动作,然后调出Safari 工具栏,需要再次点击这些交互项才能触发动作,比如按钮或链接等等都需要两次点击才触发,这个行为就想页面底部有个透明遮罩一样,这段话可能有点绕,大家可以看下下面得test case:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div style="height: 4600px;background: #ccc"></div> <div class="test" style="height: 300px;background: sandybrown;width: 100%;position: fixed;bottom: 0;left: 0;font-size:16pt"> <div style="height: 100px; background: cadetblue;position: absolute;top:0;width:100%"> 我没给safari挡住,任何时候都可以正常触发; </div> <p style="position: absolute; top: 120px;">如果是全屏,我可能给safari挡住了,事件不会触发;</p> </div> <script> var Box = document.getElementsByClassName("test")[0]; Box.addEventListener("touchend", function(){ alert("click"); }) </script> </body> </html><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div style="height: 4600px;background: #ccc"></div> <div class="test" style="height: 300px;background: sandybrown;width: 100%;position: fixed;bottom: 0;left: 0;font-size:16pt"> <div style="height: 100px; background: cadetblue;position: absolute;top:0;width:100%"> 我没给safari挡住,任何时候都可以正常触发; </div> <p style="position: absolute; top: 120px;">如果是全屏,我可能给safari挡住了,事件不会触发;</p> </div> <script> var Box = document.getElementsByClassName("test")[0]; Box.addEventListener("touchend", function(){ alert("click"); }) </script> </body> </html>
在上面的case很明显,在全屏模式得时候,当底部的fixed元素足够高的时候多余得部分的touch等等事件都是还能触发得,所以初步可以得出此问题,是safari在全屏模式时会在底部creat一个透明的遮罩去用于它退出全屏模式,这个遮罩得zIndex优先级是远远高于整个页面上dom tree得任何节点。
其实在实际开发中,底部可能有的都是些链接或者其他得touchend事件之类的,所以这个问题也仅仅只会让人觉得交互差,不会产生实际问题,但是向我最近做的底部的fixed工具条内容却是比较多需要做move操作,全屏模式下时,touchmove却是不会触发遮罩事件退出全屏模式,这时看起来好像事件失效了一样,就比较坑了,目前能解决的方法也只能通过设备和浏览器判断,让它fixed到顶部去避免此问题。
PS:另外之前在做设备放缩功能的时候三星android(具体机器型号记不住了)下,也会create类似的遮罩而导致缩放失效
position:fixed之safari的坑