Bandas de degradado en Chrome

He intentado usar CSS de degradado lineal para evitar usar una imagen para un degradado, pero desafortunadamente se muestra mal en Chrome con bandas visibles.

He creado un ejemplo de codepen para ilustrar el problema.

http://codepen.io/chrism/pen/1

Es extraño porque funciona perfectamente en safari, otro navegador basado en webkit.

El código CSS proviene de las imágenes de la brújula, así que no creas que es un problema con mi CSS

Encontré en el rastreador de problemas de Chrome este ticket, que creo que se relaciona con este problema.

http://code.google.com/p/chromium/issues/detail?id=41756

Me preguntaba si alguien tenía alguna solución para esto que no implique el uso de imágenes.

¡Gracias!

No. No hay solución. Es el motor de renderizado de Chrome. Nada de lo que pueda hacer es usar imágenes o esperar a que Google mejore su motor de renderizado.

Respuestas (2)

La diferencia que estás viendo es difuminado. Safari difumina los gradientes, Chrome no. No creo que haya una manera de habilitar o deshabilitar el tramado para ninguno de los dos.

Dither es una forma de ruido aplicada intencionalmente que se usa para aleatorizar el error de cuantización, evitando patrones a gran escala, como bandas de color en las imágenes.

http://en.wikipedia.org/wiki/Dither

Desafortunadamente, esto significa que es posible que deba usar imágenes. Si decide usar una imagen repetitiva para un degradado, asegúrese de dejar suficiente ancho o alto para que funcione el difuminado. Por lo general, el tramado necesita alrededor de 10 a 20 píxeles para que no se vea repetido.

Hola Marc, gracias por la respuesta. Sí, entiendo que el degradado más suave se debe al difuminado, solo esperaba que alguien supiera alguna forma de " forzar" a Chrome a difuminar los degradados de alguna manera con CSS o javascript. Usaré una imagen en su lugar, pero esperaba (por varias razones) que no también. ¡Gracias de nuevo por tu consejo y disfruto tu iteración de podcast!
Sí, sería genial si -webkit-gradient-dither: on; existió. y gracias
No es lo mismo, y probablemente tenga un rendimiento mucho más pobre, pero ¿qué pasa con una textura de ruido sutil sobre la parte superior de un degradado dibujado con CSS? Probablemente podría usarse una textura de ruido más bien pequeña para todos sus gradientes. No es idéntico a los degradados difuminados, pero ¿podría ser mejor que no difuminar?
Es divertido que digas eso porque fue lo primero que intenté: agregar una imagen de fondo de ruido transparente en la parte superior ... aunque definitivamente ayudó, lamentablemente no es suficiente para ofuscar las bandas lo suficiente incluso con un ruido bastante fuerte (demasiado para el efecto que quiero de todos modos). Me hubiera gustado haber publicado imágenes para ilustrar esto, pero necesito un par de puntos más antes de poder hacerlo. Gracias de nuevo por tu sugerencia, me hace feliz haber considerado todos los caminos antes de recurrir a una imagen :)
Está bien. Bueno, es genial que lo hayas probado. Voté la pregunta a favor, así que espero que eso le dé algunos puntos más para poder publicar imágenes.
Muchas gracias. También he respondido un par de preguntas para poner las cosas en marcha y que las cosas mejoren. Me gusta este lugar, ¡mucha señal con poco ruido!

Me doy cuenta de que si renderizas el elemento que contiene tu degradado con la GPU usando transform:translateZ(0), se vuelve más suave, no perfecto, pero sí más suave.

Bandas de degradado en Chrome
RespuestasAquíPolítica de privacidad1y, 0v