position:fixed之safari的坑

最新推荐文章于 2024-09-03 16:20:08 发布

籽沫

最新推荐文章于 2024-09-03 16:20:08 发布

阅读量4.1k

点赞数 1

本文链接：https://blog.csdn.net/nx8823520/article/details/38070811

版权

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类似的遮罩而导致缩放失效