Num mini-projecto que estou a preparar em HTML5 e CSS3, estou a usar cantos redondos feitos por CSS. O código para os fazer (ainda) é com os prefixos dos vários browsers e é muito simples:

/* standards */
border-radius: 1em 0.25em 2em 2em;
/* para o Firefox */
-moz-border-radius: 1em 0.25em 2em 2em;
/* para o Safari e Chrome */
-webkit-border-radius: 1em 0.25em 2em 2em;
/* para o Opera */
-o-border-radius: 1em 0.25em 2em 2em;

Nem preciso dizer que nenhuma versão corrente do Internet Explorer suporta isto, certo?

Só para que vejam o efeito, aqui fica uma bonita (cof, cof) caixa com este estilo aplicado:

Teste de cantos redondos. Quem vier com o IE, vê uma caixa rectangular...

Por acaso este exemplo não é dos melhores do mundo - o problema que vou relatar de seguida não é muito visível. Felizmente tirei uma fotografia ao problema no tal mini-projecto:

round_corners_chrome

Isto é tirado do Google Chrome. Como podem ver, o fundo da caixa1 vem um bocadinho para fora dos cantos arredondados (chama-se a isto bleeding, que me recuso a traduzir por sangramento). Visto sem ampliação, é facilmente confundido com um problema de aliasing, como se pode ver nas várias ocorrências levantadas no suporte do Chromium.

Mas não é. Na realidade, existia mesmo um problema de aliasing, que foi corrigido, mas os utilizadores continuavam a queixar-se, porque, afinal, era outro tipo de problema; que, diga-se de passagem, ainda não está corrigido convenientemente.

Como, provavelmente, seria um problema ao nível do motor, comecei a escarafunchar em todas as propriedades CSS da família –webkit-*. Depois de várias ilusões e desilusões, lá encontrei a propriedade certa: –webkit-background-clip. Esta também é uma propriedade CSS3 (background-clip), e serve para definir onde é feito o corte do fundo. Os valores aceites são border-box, corte feito no final (e por baixo) dos borders, padding-box, corte feito no final dos paddings, e content-box, corte feito antes do início dos paddings.

O valor por defeito, em todos os browsers (em todos os que suportem, bem entendido – sim, estou a falar do IE) é border-box, o que parece correcto; afinal, desde que tenha uma borda sólida, o fundo fica por baixo.

Mas é aqui que entra o problema do Chrome – o cálculo da posição das borders está mal feito, e vêm-se pedaços do fundo. Mais: isto não é um problema do motor Webkit, visto que o Safari comporta-se devidamente, mas sim do próprio renderer (que, no caso do Chrome, é o Skia).

Solução? Bem, neste caso (bordas sólidas) é simples: é só efectuar o corte da imagem antes das borders, isto é, no final dos paddings, se os houver:

/* standards */
border-radius: 1em 0.25em 2em 2em;
/* para o Firefox */
-moz-border-radius: 1em 0.25em 2em 2em;
/* para o Safari e Chrome */
-webkit-border-radius: 1em 0.25em 2em 2em;
-webkit-background-clip: padding-box;
/* para o Opera */
-o-border-radius: 1em 0.25em 2em 2em;

E, bingo, fica o problema resolvido. Bem, quase – efectivamente existe ali um pequenino problema de aliasing que ainda não está bem na batata, mas antes isso do que como estava. Os outros browsers apresentam impecavelmente, com nota artística para o IE e os seus cantos quadrados…

1 sim, é um gradiente, sim, também é CSS pura, não, não me apetece falar sobre isso hoje – noutro dia, ok?

Partilhar no Sapo Links Partilhar no del.icio.us Partilhar no Digg Partilhar no Twitter Partilhar no StumbleUpon Partilhar no MySpace Partilhar no Facebook

Comentários Deixar um comentário

 Categorias
 Arquivo
 Projectos em Destaque
 Últimas Postas no Blog
 Últimos Comentários do Blog