Chrome radiale css gradiente scorrevolezza

Question

Im utilizzando chrome 18.0.1025.162 e sto cercando di fare un gradiente radiale

-webkit-radial-gradient(circle, rgba(100, 100, 100, 0.2), rgba(0, 0, 0, 0.9)) 

Il problema è che il gradiente è sorta molto pixel del, la transizione di colore e alfa è in blocchi e non liscia . Questo è diverso in Safari e Firefox. Safari & Firefox lo fa molto bene e bene

Si tratta di un bug con Chrome? Qualcuno ha lo stesso problema con questo. È un gradiente così semplice !! Sicuramente qualcosa di semplice come questo non può essere un problema tecnico

Check out: http://jsfiddle.net/GyRLe/1/ per una demo di cosa intendo.

C'è una soluzione per questo? Un'immagine sarebbe terribile :(

(Ok, quindi per vedere quanto male la scorrevolezza è): Questo è ciò che ottengo quando im usarlo: http://i.imgur.com/UYB1d.png (Chrome)
http://i.imgur.com/tzGuq.png (Safari) (sembra un po 'nervoso ma questo è a causa del png, altrimenti il ​​suo vicino a perfetta scorrevolezza)

Firefox è solo buono come Safari suo solo cromo sta facendo male ho bisogno alfa perché Im mettere un'immagine di ripetizione stile in background

Modifica: Chrome 20 (Canary) aveva anche questo orribile problema!

Edit2: Il motivo per cui utilizziamo i CSS è quindi non dobbiamo usare le immagini! Così ho aggiunto questo per http://code.google.com/p/chromium/issues/detail?id=123491 & spera Google ottiene il loro atto dritto, perché penso che Chrome è meraviglioso

Answer 1

So che sono stati pubblicati molto tempo fa, ma ho incontrato lo stesso problema (forte banding) con Chrome 24 con:

-webkit-radial-gradient(center, ellipse cover, #XXXXXX 0%,#YYYYYY 100%); 

Ma ho capito che usando il codice seguente il banding quasi scomparso:

-webkit-gradient(radial, center, 0px, center, 100%, color-stop(0%,#XXXXXX), color-stop(100%,#YYYYYY)); 

Spero che questo aiuti.

Edit: ho visto che -webkit-gradiente (radiale, ...) è solo la vecchia sintassi per la visualizzazione gradiente radiale, quindi non dovrebbe essere una risposta a lungo termine per tale questione ...

Answer 2

Se non è necessario il valore alfa, sembra molto più agevole utilizzando rgb invece di rgba.

Demo: http://jsfiddle.net/tKtV9/

Answer 3

Non aiuta molto in questo caso, ma ho notato che l'aggiunta di

width: x-value; 
height: y-value; 

a volte può aiutare. Valore X e valore Y, ovviamente, essendo le tue dimensioni.