Chrome suavidad degradado radial css

Im usando chrome 18.0.1025.162 y estoy tratando de hacer un degradado radialChrome suavidad degradado radial css

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

El problema es que el gradiente es una especie muy pixelada de la transición de color y alfa está en bloques y no lisa . Esto es diferente en Safari y Firefox. Safari & Firefox hacerlo muy bien y bien

¿Es esto un error con Chrome? Cualquiera tiene el mismo problema con esto. Es un degradado tan simple! Sin duda, algo tan simple como esto no puede ser una falla

Revisa: http://jsfiddle.net/GyRLe/1/ para una demostración de lo que quiero decir.

¿Existe una solución para esto? Una imagen sería horrible :(

(Ok por lo que para ver lo mal que la suavidad es): Esto es lo que me pasa cuando estoy usando es: http://i.imgur.com/UYB1d.png (Chrome)
http://i.imgur.com/tzGuq.png (Safari) (parece un poco nervioso pero eso es debido a la png, de lo contrario es casi perfecta suavidad)

Firefox es tan bueno como Safari es sólo el cromo lo está haciendo mal necesito alfa debido a una imagen de estilo de repetición Im poniendo en segundo plano

Editar: Chrome 20 (Canarias) también tuvo este horrible problema!

Edit2: ¡La razón por la que usamos CSS es para que no tengamos que usar imágenes! Así que he añadido a este http://code.google.com/p/chromium/issues/detail?id=123491 & esperemos Google obtiene su actuar directamente, porque creo que el cromo es maravilloso

Fuente

2012-04-14 Akshat

¡No! No hay solución Tendrás que usar una imagen. – Ryan

Me parece muy sencillo: http://i.stack.imgur.com/sal39.png (Chrome 18.0.1025.142 (Ubuntu 11.10)). –

Comparar con safari (mi ejemplo no es muy bueno, pero con una de mis configuraciones (con una imagen como fondo) es horrible) – Akshat

Sé que se han publicado hace mucho tiempo, pero me encontré con el mismo problema (bandas fuerte) con Chrome 24 usando:

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

pero me di cuenta que el uso del código de abajo las bandas casi desapareció:

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

Espero que esto ayude.

Editar: he visto que webkit-gradiente (radial, ...) es sólo la sintaxis de edad para la exhibición degradado radial, por lo que no debería haber una respuesta a largo plazo para ese tema ...

Fuente

2013-02-10 16:09:51

Welp. Esta respuesta ya no es adecuada. :( – Awol

Si usted no necesita el valor alfa, se ve mucho más suave usando rgb en lugar de rgba.

Demostración: http://jsfiddle.net/tKtV9/

Fuente

2012-04-14 21:43:45 stewe

No hay absolutamente ningún cambio cuando se agrega transparencia. Intente disminuir el rango de color, p. gradiente de blanco a gris y verá las bandas – Awol

no ayuda mucho en este caso, pero me he dado cuenta que la adición de

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

a veces puede ayudar. X-value y Y-value, por supuesto, siendo sus dimensiones.

Fuente

2012-04-14 22:03:49 Connor

¿Dónde lo ha agregado? Ya uso alto y ancho (como en jsfiddle, simplemente lo tiré en el div en lugar del css) – Akshat

Sí, como tú. Pero cuando agrego el degradado a html o cuerpo, por ejemplo, me he dado cuenta de que configurar un ancho/alto ayuda a suavizar el degradado. – Connor

Chrome suavidad degradado radial css

Respuesta

Cuestiones relacionadas