4

ドラッグ可能でサイズ変更可能なdiv要素にその場でキャンバスを追加するコードがあります。ここに貼り付けるには多すぎます->ここにjsFiddleがあります...

IE-10とFF-19では正常に動作しますが、Webkit（Chrome-25）では、サイズ変更を行った後にdivをドラッグすると、深刻なアーティファクトが残ります。実行するテストは次のとおりです。

  How to see the artifacts in WEBKIT BROWSERS ONLY
   1. Drag the gray header, shake mouse, notice NO artifacts as you shake the div
   2. Drop the header, resize div using the lower right handle so that you see about an equal amount of green and purple
   3. Repeat step 1, only this time artifacts are everywhere in webkit browsers (not IE 10 or FF 19)
   4. Now delete the javascript code from line 11 on down (the function and call) and run fiddle again
   5. Repeat the test in steps 1-3.  Without the canvas, there are NO artifacts.
   6. Try in non-webkit browsers.  NO artifacts.

私が作成したテストケースは、キャンバスが原因であることを示しているようです。非Webkitは問題なく動作するため、これをコーディングエラーとは見なしません。また、ハードウェアが問題である可能性があると思いましたが、これを複数のマシンで再起動/実行したため、繰り返し可能です。

ブラウザのバグを見つけましたか、それとも誰かが私のコードにエラーを見つけましたか？

4

2 に答える 2

6

私にも同じバグがありました（そして、そうです、Sebas、私はこれをバグと呼びます。単なる批評ではなく解決策があればもっと良いです）。

「オーバーフロー：非表示」あなたのCSSでバグの引き金になります。

#wrapper {position: relative; width: 300px; height: 300px; background-color: silver;border: 6px solid lightgray; z-index: 2; border-radius: 15px; overflow: hidden;}

これが、jsFiddleを削除したフォークです。

http://jsfiddle.net/sv9yZ/1/

私はこれが古いことを知っています、私が検索から来る人のためにこれを追加すると考えました...

于 2013-05-23T19:47:44.043 に答える
0

Mac OSX10.8.2のChrome25で繰り返すことができます。

私も以前にこれに問題がありました。キャンバス描画ルーチンがCSS描画と相互作用する方法にバグがあるようです。これはブラウザのバグであるため、私が見つけたこれを修正する良い方法はありません。できることは、背景全体をdivで覆い、ドラッグして再描画を強制するときに点滅するようなハックを試すことだけだと思います。それはきれいではありませんが、私はこれを行うためのより良い方法を見つけたことがありません。

于 2013-03-16T02:58:07.980 に答える