logo标签列表

死亡矩形——移动版Safari

javascriptjquerytwitter-bootstrapmobile-safari
20

(注意：下面更新1-5)

我有一个基于Twitter-Bootstrap的响应式网页，页面左上角有一个矩形区域完全不可用，但仅在Mobile Safari上（我没有在Android上测试）。

不可用，定义如下：

  • 死区内的各种按钮无法点击
  • 在死区中上下滑动不会滚动页面。

我添加了以下代码：

$('*').click(function(){ 
  console.log($(this)); 
});

我发现当我打开移动版Safari的JS控制台时，死区向上偏移了与控制条像素高度相等的距离！也就是说，死区已经缩小了。此外，控制台记录了所有点击，除了在死区内执行的点击。

更新#1：

根据评论的建议，我...

1）再次检查了固定位置的元素：

        $('*').click(function() { 
            console.log('checking for fixed elements...');
            $('*').each(function() {
                if ($(this).css('position') == 'fixed') {
                    console.log($(this));
                }
            })
        });

事实证明，我的Bootstrap模态框在移动设备上都是固定位置。我移除了所有模态框，问题仍然存在。

2) 添加以下CSS代码....

* { outline: 1px solid red; }

以下是 iPhone 的屏幕截图。（蓝色框是我用 Photoshop 后期添加的，以模拟“死区”）...

dead-zone screenshot

更新 #2: 好吧，这太荒谬了。我开始从我的代码中剥离一些东西。我最终得到了以下内容，并且问题仍然存在！...

<html>
<head>
</head> 
<body>


</body>
</html>
更新 #3: 这很可能是 Safari 的 bug，与我的网页无关（参见下面的更新 #2）。我强制关闭了 Safari，重新打开后问题消失了。
更新 #4: 问题又出现了 :( 可能这确实与我的网页有关，而不是 Safari 的偶然故障。然而，它似乎是随机发生的... 强制关闭浏览器可以暂时解决它，直到它再次出现。
更新 #5: 一旦“死区”出现，在导航到另一个网页后，“死区”仍然存在。
4
使用类似 * { opacity: 0.5; outline: 1px solid red; } 的CSS进行调试？ - biziclop
2
如果您进行旋转会怎样？我会责备左上角的Bootstrap菜单；当您将普通浏览器缩小时，您也会得到它，这一点您应该知道。而且，对于Retina /非Retina情况是否有所不同呢？ （可以在iPhone模拟器中进行测试。） - Arjan
1
那么，使用原始的完整网站也不会使问题重新出现（因为重新启动Safari）？ - Arjan
2
你可以考虑在问题中的某个地方提供页面链接，即使大多数人无法在浏览器中运行它，这可能会帮助他们发现问题。 - naugtur
2
总的来说，我发现iOS上的固定定位是一个极其复杂的问题，不可交互/不可呈现的区域可能会因此出现。我的网站没有使用任何框架，根据我设置的各种可疑测试用例，我的解决方案涉及以下内容：
  • 确保固定定位内容在DOM嵌套方面处于滚动/缩放内容之外。
  • 在可能的情况下，转换/平移滚动内容而不是重新定位。
您能否上传一个剥离所有敏感内容的版本，以便我们可以尝试进行调试？ - Barney
显示剩余8条评论
3个回答
3
这个问题可能有数百万种可能性。我建议您将设备连接到电脑上并打开Safari浏览器，确保在偏好设置中开启“开发者模式”。从“开发”菜单中选择您的设备，并检查元素。您可以通过将“display:none”添加到每个元素中，逐一排除问题，直到找到问题所在。
1

尝试为出现问题的元素设置以下CSS属性：

<selector> {
   pointer-events: all; 
}

其中<selector>代表所涉及的元素选择器

1
你完全移除了所有的模态框吗？我之前遇到过类似的问题，问题在于我的模态框缺少了“hide”类，没有这个类，模态框只会淡化到不透明度为0。
例如： class="modal hide fade"
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接