Google Chrome - context.canvas.width/context.canvas.width provoca "Blue layer"

Question

Ho eseguito l'upgrade da Chrome versione 17 a Chrome: 18.0.1025.142 oggi.

Ho notato che una delle app Web su cui sto lavorando ha uno strano livello blu che appare sul caricamento e quindi scompare quando si avvia lo scorrimento.

ho rintracciato questo fino alle seguenti righe nei miei JS:

   context.canvas.width = canWidth; 
       context.canvas.height = canHeight; 

canWidth e canHeight sono generati in modo dinamico.

Commentando queste righe si arresta il rendering del livello blu, tuttavia questa non è una correzione in quanto è necessario utilizzare i valori generati dinamicamente per controllare la larghezza/altezza del canvas.

Ho anche tentato di codificare hard context.canvas.width e context.canvas.height a 600 e questo ha anche generato il problema del livello blu.

Questo non era un problema nelle versioni precedenti di Chrome e non ho alcun problema in FireFox.

Qualche suggerimento su quale potrebbe essere il problema?

Edit:

Ecco il blocco di codice in cui risiede sopra (nodeLeft e nodeTop vengono generate altrove):

   context.clearRect (0 , 0 ,canWidth, canHeight); 
       context.canvas.width = canWidth; 
       context.canvas.height = canHeight;         
       context.beginPath(); 
       context.moveTo(x, y); 
       context.lineTo(nodeLeft, nodeTop); 
       context.strokeStyle = "#000000"; 
       context.lineCap = "round"; 
       context.stroke(); 

Answer 1

EDIT:

Ok, ho preso per me. Sembra essere un problema con alcune schede grafiche AMD. Potrei disattivare la modalità ad alte prestazioni per Chrome nel centro di controllo del catalizzatore. Questo ha risolto la maggior parte delle cose fastidiose per me ... spero che venga risolto nelle prossime versioni.

Per informazioni mor vedere: http://code.google.com/p/chromium/issues/detail?id=121658

---

Questa non è una soluzione, ma sto affrontando lo stesso problema e mi sta facendo impazzire. Sto cercando di inchiodarlo. Ho provato il browser differente su diverse macchine:

Problemi:

• strati blu (vedo solo loro se Chrome non è ingrandita)
• Misplaced y barra di scorrimento (a volte mostra solo se passare attraverso le schede)
• Forme distorte. Le dimensioni della tela e le immagini/forme disegnate variano da chrome ad altri browser. Significa che le tele/forme sono più piccole su Chrome, per lo più riducono la larghezza.

Conclusione 1: Sembra che non accade su tutti i computer con Chrome 18.x.x. Sembra essere un problema hardware, ma non potrebbe costringerlo ulteriormente in realtà.

Conclusione 2: Se i impostare la dimensione della tela per 200 altezza/larghezza, non sembrano i problemi. Se lo metto più in alto di 200, deformerà la tela/il rettangolo e appariranno altri problemi.

Conclusione 3: I problemi mostrano solo fino se qualcosa è disegnati sulla tela o qualcosa è impostato, vale a dire fillStyle.

Qui i frammenti di prova ho usato:

<canvas id="canvas" width="300" height="300" style="background-color:orange"></canvas> 
... 
ctx.fillRect (10, 10, 55, 50); 

Answer 2

potete inserire più di codice rispetto alle due linee che hai fornito ? Credo che sia qualcosa di più di dove hai impostato la larghezza/altezza.

Ho un'applicazione di disegno con cui ho lavorato su e giù per un po 'in cui faccio la stessa cosa. L'unica differenza è che io chiamo context.scale(0,0); prima di impostare la larghezza e l'altezza. Non ho problemi con nessuna versione di Google Chrome con una sovrapposizione blu. Stai forse modificando il valore di scala del contesto prima di impostare la larghezza e l'altezza?

ad es. ecco quello che ho, impostando la tela di documentare larghezza/altezza per un'area di disegno full-documento:

context.scale(0,0); 
context.canvas.width = $(document).width(); 
context.canvas.height = $(document).height(); 

edit: il mio sito armeggiare menzionato è a http://drawcomix.com se si desidera verificare la sovrapposizione blu per vedere se è il vostro browser o il tuo codice.

edit:, sulla base di ulteriori commenti ...

Ho visto tutorial sul web che suggeriscono il modo migliore per cancellare la tela è per impostare l'altezza/larghezza. Questo non è completamente vero. Sul carico documento, può essere il/modo più semplice e veloce per farlo, ma su movimenti del mouse, probabilmente siete meglio fare qualcosa di simile:

context.save(); 
context.setTransform(1,0,0,1,0,0); 
context.clearRect(0,0,width,height); // width/height of canvas 
context.restore(); 

Potrebbe non essere necessario setTransform se non stai eseguendo eventuali trasformazioni sulla tela.

Credo di aver trovato questa soluzione in Pro HTML5 Programming (Apress), ma non ne sono sicuro.