5

iPad 4 ブラウザー (Safari か Chrome かは関係ありません) で次の html ページを表示すると、ズーム時にブラウザーがクラッシュします (ダブルタップズームまたはピンチしてズームします)。このページには、プロパティ -webkit-backface-visibility:hidden を持つ 40 個の単純な div (簡潔にするために JavaScript によって挿入されます) が含まれています。

<!doctype html>
<html>
<head>
    <style>
        .front {
            -webkit-backface-visibility: hidden;
            position: absolute;
            border: 1px solid black;
            width: 800px;
            height: 800px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>    
</head>

<body id="outer">
    <script>
        $(function() {
            for (var i = 0; i < 40; i++) {
                $(document.createElement('div'))
                    .css({top: i*10, left: i*10})
                    .addClass("front").appendTo($("#outer"));
            }
        })
    </script>
</body>
</html>

おそらく同じ問題が、iPhone および古い iPad でも発生する可能性があります。これは奇妙で厄介なバグです。内部要素の -webkit-backface-visibility:hidden スタイルを無効にすると発生しません。

あなたは疑問に思うかもしれません: -webkit-backface-visibility:hidden スタイルを単純に削除しないのはなぜですか? これは最小限の反例です。実際のより複雑なページで必要です。

4

2 に答える 2

1

モバイル Safari では、transitions、transform、backface-visiblity などの css3 プロパティに問題があり、メモリ不足になることがあるようです。

見る：

残念ながら、プロパティを削除する以外に既知の回避策はありません...どのように問題を解決しましたか?

于 2014-02-12T13:19:45.193 に答える