0

$("#canvas").height(100);次の HTML ファイルは、行がコメント化されているかどうかに応じて、Chrome 特有のものを生成します。

<!DOCTYPE html>
<html>
    <body>
        <div style="margin-right: auto; margin-left: auto; width: 940px;">
            <div><h1>Title</h1></div>
            <div style="height: 50px;"></div>
            <svg id="canvas" style="width: 100%; position: absolute; left: 0px; z-index: -1;">
                <rect id="rect" x="0" y="0" width="100" height="100" fill="none" stroke-width="1" stroke="black"/>
            </svg>
            <div id="div1">Hi</div>
            <div id="div2"></div>
        </div>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script type="text/javascript">
            function move() {
                var left = $("#div1")[0].getBoundingClientRect().left;
                $("#div2").text('left = ' + (left - 5));
                $("#rect").attr("x", left - 5);
                $("#canvas").height(100);
            }

            move();

            $(window).resize(function() {
                move();
            });
        </script>
    </body>
</html>

最大化された Chrome ウィンドウにページを読み込むと、解像度に応じて、div のテキストが に変わりますleft = N。この の値がN7 ずれていることがわかります。これは、ウィンドウのサイズを変更して最大化しないようにし、再度最大化することで確認できます。

$("#canvas").height(100);行がコメントアウトされている場合、この奇妙な動作は表示されません。これは、この jsfiddle で確認できます: http://jsfiddle.net/jvPCM/1/。四角形が左端に近づかなくなるまで結果ペインを左に広げてから、更新を押して間違った描画を表示する必要があります。ペインのサイズを再度変更すると修正されます。これがどのように見えるかです：

良い:ここに画像の説明を入力悪い:ここに画像の説明を入力

何が原因でしょうか?

参考までに: これは Firefox では表示されません (皮肉なことに、最初に高さを設定する必要がありました)。

4

2 に答える 2

1

これは、これら 2 つのブラウザーが出力をレンダリングする方法が原因で発生します。

Chrome は、スクリプトを実行する準備が整うとすぐにレンダリングして実行します。ページがまだ未知のリソースをロードしている (jquery は既にそこにロードされている) ことを非常に高速に実行することがわかります。ブラウザでテストしたところ、これにより奇妙なスクロールバーが表示されます（もちろんすぐに消えます）。このスクロールバーはページ幅を変更し、キャンバス幅は 100% スタイルによってそれに依存します。このすべてが、直面したバグを引き起こします。

参考までに: $(document).ready も機能しません。

于 2013-04-07T20:17:04.667 に答える
0

を呼び出す前に、キャンバスの高さを上部に設定することで問題を解決できましたgetBoundingClientRect。

ただし、なぜ異なる値が報告されるのかはまだわかりません。

于 2013-04-07T20:03:30.197 に答える