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 中添加的蓝色框以近似死区）...

死区截图

更新#2：好的，这太荒谬了。我开始从我的代码中删除一些东西。这就是我最终得到的结果，问题仍然存在！...

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


</body>
</html>

更新#3：这可能是一个 safari 错误，与我的网页无关。（见下面的更新#2）。我强制关闭了 safari，重新打开后问题就消失了。

更新＃4：问题再次出现:(也许它毕竟是我的网页而不是野生动物园侥幸。但是，它似乎是随机发生的......强制关闭浏览器将修复它一段时间，直到它再次出现。

更新#5：一旦出现死区，导航到另一个网页后，死区仍然存在。

4

3 回答 3

3

这个问题只有大约一百万种可能性。我将首先将您的设备插入您的计算机并打开 Safari。确保在您的首选项中打开开发模式。从开发菜单中选择您的设备，然后检查元素。你能找到的东西真是太棒了。首先向每个元素添加“display:none”，直到找到问题所在。

在此处输入图像描述

在此处输入图像描述

在此处输入图像描述

于 2012-10-08T16:52:17.447 回答
1

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

<selector> {
   pointer-events: all; 
}

where<selector>代表有问题的元素选择器

于 2012-10-05T13:50:00.533 回答
1

您是否完全删除了所有模态？我有一个这样的问题之前的问题是我的模态隐藏类隐藏，没有这个模态只是褪色到不透明度0

示例：class="modal 隐藏淡入淡出"

于 2012-10-01T22:19:12.513 回答