Faixa de gradiente no Chrome

Eu tenho tentado usar CSS de gradiente linear para evitar o uso de uma imagem para um gradiente, mas infelizmente ela é renderizada mal no Chrome com faixas visíveis.

Eu criei um exemplo de codepen para ilustrar o problema.

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

É estranho porque é renderizado perfeitamente no safari, outro navegador baseado em webkit.

O código CSS vem de imagens de bússola, então não pense que é um problema com meu CSS

Encontrei no rastreador de problemas do Chrome esse ticket, que acho que está relacionado a esse problema.

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

Eu queria saber se alguém tinha alguma solução alternativa para isso que não envolvia o uso de imagens?

Obrigado!

— Chris
fonte

Não. Não há solução alternativa. É o mecanismo de renderização do Chrome. Nada que você possa fazer para usar imagens ou esperar que o Google melhore o mecanismo de renderização.

— Scott

Respostas:

A diferença que você está vendo é hesitante. O Safari apresenta gradientes, o Chrome não. Não acredito que haja uma maneira de ativar ou desativar o pontilhamento.

O Dither é uma forma de ruído aplicada intencionalmente usada para aleatorizar o erro de quantização, impedindo padrões em grande escala, como faixas de cores nas imagens.

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

Infelizmente, isso significa que você pode ter que usar imagens. Se você não decidir usar uma imagem de repetição para um gradiente, certifique-se de deixar suficiente largura ou altura para a composição de cores para o trabalho. Geralmente, o pontilhamento precisa de 10 a 20 pixels para não parecer repetido.

— Marc Edwards
fonte

Olá Marc, obrigado pela resposta. Sim, eu entendo que o gradiente mais suave é devido ao pontilhamento, eu só esperava que talvez alguém conhecesse uma maneira de 'forçar' o cromo a inclinar gradientes de alguma forma com CSS ou javascript. Vou usar uma imagem, mas estava esperando (por várias razões) não muito. Mais uma vez obrigado pelo seu conselho e eu aprecio o seu podcast iterado!

— 31412 Chris

Sim, seria ótimo se -webkit-gradient-dither: on; existia. E obrigado: D

— Marc Edwards

Não é o mesmo e, provavelmente, um desempenho muito pior, mas e uma textura sutil de ruído por cima de um gradiente desenhado em CSS? Uma textura de ruído pequeno provavelmente poderia ser usada para todos os seus gradientes. Não é idêntico aos gradientes pontilhados, mas pode ser melhor do que não pontilhar?

— Marc Edwards

É engraçado você dizer isso porque foi a primeira coisa que tentei - adicionar uma imagem de fundo de ruído transparente por cima ... embora definitivamente tenha ajudado, infelizmente não é suficiente ofuscar a banda o suficiente, mesmo com ruído bastante pesado (demais para o efeito que eu quero de qualquer maneira). Eu gostaria de ter postado imagens para ilustrar isso, mas preciso de mais alguns pontos antes de poder. Obrigado novamente por sua sugestão, que me faz feliz que eu tenha considerado todas as possibilidades antes de recorrer a uma imagem :)

— Chris

Ah ok. Bem, é ótimo você ter tentado. Votei a questão, espero que isso dê mais alguns pontos para você poder postar imagens.

— Marc Edwards

Percebo que se você renderizar o elemento que contém seu gradiente com a GPU usando transform:translateZ(0), ele ficará mais suave, não perfeito, mas mais suave.

— Sirkan
fonte