20

（注：以下の1〜5の更新）

私はTwitter-BootstrapベースのレスポンシブWebページを持っており、ページの左上隅には完全に死んでいる長方形のゾーンがありますが、Mobile Safariでのみです（Androidではテストしていません）。

死んだ、定義された：

  • デッドゾーンの各種ボタンはクリックできません
  • デッドゾーンで上下にスワイプしても、ページは上下にスクロールされません。

次のコードを追加しました。

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

...そしてモバイルサファリ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のスクリーンショットです。（後でフォトショップでデッドゾーンを概算するために追加した青いボックス）...

デッドゾーンのスクリーンショット

更新＃2：わかりました、これはばかげています。私は自分のコードから何かを取り除き始めました。これが私が最終的に得たものであり、問​​題は解決しません！...

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


</body>
</html>

更新＃3：これはおそらくサファリのバグであり、私のWebページとは何の関係もありません。（以下の更新＃2を参照してください）。私はサファリを強制的に閉じました、そして再び開いたとき、問題は消えました。

更新＃4：問題が再発しました:(結局のところ、それは私のWebページであり、サファリのまぐれではないかもしれません。しかし、それはランダムに発生するようです...ブラウザを強制終了すると、再び戻るまでしばらくの間修正されます。

更新＃5：デッドゾーンが表示されたら、別のWebページに移動した後、デッドゾーンはまだそこにあります。

4

3 に答える 3

3

この問題には約100万の可能性しかありません。まず、デバイスをコンピューターに接続してSafariを開きます。設定で開発モードがオンになっていることを確認してください。開発メニューからデバイスを選択し、要素を調べます。あなたが見つけることができるものは驚くべきものです。問題が何であるかがわかるまで、各要素に「display：none」を追加することから始めます。

ここに画像の説明を入力してください

ここに画像の説明を入力してください

ここに画像の説明を入力してください

于 2012-10-08T16:52:17.447 に答える
1

問題のある要素に次の CSS プロパティを設定してみてください。

<selector> {
   pointer-events: all; 
}

<selector>問題の要素セレクターを表す場所

于 2012-10-05T13:50:00.533 に答える
1

すべてのモーダルを完全に削除しましたか? 問題が発生する前に、このような問題がありました。これがないと、モーダルは不透明度0にフェードするだけです。

例: class="モーダル 非表示 フェード"

于 2012-10-01T22:19:12.513 に答える