IOS 5 (safari)在“position:fixed” div上存在HTML触摸事件的错误

Question

IOS 5 (safari)在“position:fixed” div上存在HTML触摸事件的错误

11

我在一个滚动网页上有一个position:fixed的div。

一开始事件是有效的，但是当页面滚动时，虽然fixeed div保持不动，但它的“触摸”区域似乎会改变（似乎会滚动 - 除非在另一个div的顶部，或者取决于页面布局...）。最终如果你滚动太多就不再接收到任何触摸事件了。有时候下面的div会收到事件。

这是样例：

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
    <meta name="apple-mobile-web-app-capable" content="yes" />

<style>
#fixed {
  position: fixed;
  width:200px;
  height:200px;
  z-index:1;
  background: rgba(100,0,0,0.5);
}

#scrolling {
  display: block;
  position: absolute;
  top: 100px;
  left: 100px;
  width:200px;
  height:999px;
  background: rgba(0,100,0,1);
}
</style>
</head>

<body>
  <div id="fixed"     ontouchend="alert('touch fixed')"></div>
  <div id="scrolling" ontouchend="alert('touch scrolling')"></div>
</body>

当你滚动到足够的位置并且在红色"fixed" div的左侧触摸时，没有任何反应(没有警告)。然而，在右侧(绿色滚动div的上方)它可以正常工作... ?!

在我看来，这似乎是Safari的一个bug。你有同样的经历吗？有什么解决方法？(Iscroll不被考虑-太慢)

谢谢， LC

- lacorbeille

1

你是否已经提交了一个错误报告？ - Lily Ballard

1

谢谢，现在我已经完成了（Bug ID＃10675212）。 - lacorbeille

有人已经找到解决方案了吗？ - Nik Sumeiko

7个回答

2

我遇到了同样的问题。看起来这是一个z-index问题，当div被以编程方式移动（使用动画等）时：由于用户不再触摸滚动条，固定位置的div无法正常工作。只有在这种情况下，div似乎才会被正确地重新计算。

- Andrea

1

我曾经遇到过这个问题。解决方法是绑定“click”而不是“touchstart”。

这意味着我的“click”事件会出现问题（对于非触摸设备的用户），因此我首先检测悬停，然后使用悬停来告诉我他们是否是触摸用户。有点不太好看，但它有效！

- scruffian

1

我在使用jQuery动画滚动用户页面时，遇到了相同的问题，这是一个固定位置导航的问题。我不认为这是z-index的问题。我发现当动画移动视口时，固定位置元素实际上仍然停留在之前的位置，直到用户触摸并移动屏幕。此时，导航的位置会更新。更多信息和演示请参见：http://bit.ly/ios5fixedBug

- Erik Runyon

1

我也发现了这个 bug，但是下面的方法似乎解决了它：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">`

将其添加到您的HTML头部。

- cjroebuck

虽然这是一个iOS问题：但在Android上也不起作用。 - biodiv

0

这个问题可能与其他问题有关，已发布了一些解决方法。在移动版Safari上实现固定定位的效果最多只能算是半吊子。

iOS5上移动版Safari中固定定位导航栏只能点击一次

- Ryan Ore

0

触摸事件检索 pageX 和 pageY - 这表明在“页面”上的位置。如果页面向下滚动，Y 坐标会增加，因此固定元素将无法访问，因为它们的 Y 偏移值保持不变。您可以通过以下计算检查是否已在滚动页面上触摸了固定元素：

var finger = e.touches[0];
var yCalc = finger.pageY - window.pageYOffset;
var touchedElement = document.elementFromPoint(finger.pageX, yCalc);

如果您有水平滚动，则必须对x坐标执行同样的操作。

- biodiv

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gaurav Shetty · Accepted Answer

我发现了一个相对奇怪的解决方法来解决这个bug。通过添加一个touchstart事件监听器和一个空的事件处理程序，它似乎可以移动手动触摸的触摸区域。我不知道这是否是JavaScript滚动问题的解决方法。

代码：

document.getElementsByTagName("body")[0].addEventListener("touchstart",function(){});

找到这个方法的功劳归功于pamelafox在这个Github bug讨论中。