Chromeの奇妙なキャンバスレンダリングのバグ

Question

キャンバスを使用してイメージをレンダリングしています。この奇妙なグラフィックのバグが表示されることがあります。このバグは、スクロールするとすぐに消えます。

これは、反応成分の一部である、you can see the code for it here.

スクロールやレンダリング処理における何らかの更新をトリガした後、それが見えるそれが必要として：

これは私のイメージのCSSの外観です：

.async-image { 
    position: relative; 
    z-index: 1; 
    background: black; 
    overflow: hidden; 
    transform: translateZ(0) 
} 

.async-image canvas { 
    pointer-events: none; 
    opacity: 0; 
    transform: translateZ(0) 
} 

.async-image .preload { 
    position: absolute; 
    transform: scale(1.2); 
} 

.async-image .preload.ready { 
    opacity: 1; 
} 

.async-image .src { 
    position: absolute; 
    transform: scale(1.1); 
} 

.async-image .src.ready { 
    opacity: 1; 
    transform: scale(1); 
} 

.async-image img { 
    opacity: 0; 
} 

何が原因か分かりませんが、メインキャンバスの上に下にあるキャンバスがあり、プリローダーとしてソース画像の10x10のぼかし画像を表示するために使用されています。準備ができたら、画像が少し拡大されます。

このバグは、別のタブに切り替えてから戻ったときに発生するようです。

Answer 1

は申し訳ありませんが、それはタブを切り替えるに発生したことを読んでいない...

document.addEventListener('visibilitychange', function(){ 
    // Add code to re render the canvas or repaint... 
    // You can even try using window.scrollBy(0, 1); here ;P 
}) 

これはで非集束タブに支出リソースを防ぐために起きているかもしれません...

を私の古い答えを削除しましたクロム...

あなたたいが...ウェブアニメーションのための重要な絵画やFPSメーターなどを...点検し、このようなクロムのdevのツールでそれを有効に知っていれば...

この問題と、（遅いレンダリングについて）あなたがにリンクされている1を見てみると...

Answer 2

を助け

希望、私は代替としてCSSフィルタを試してみました。ブラウザのサポートはpretty goodです。本当に広いブラウザサポートが必要な場合は、you can use SVG filters。