8

Estou a criar um rebordo no meu site, com background image. Funciona tudo perfeitamente no Chrome, mas no Firefox e IE aparecem umas linhas indesejadas. Já percebi que estão presentes na propriedade CSS3 de transform:scaleX(-1); na Div efeito do qual eu necessito, também noutros elementos do site para que o padrão comece a a partir do centro da página da direita para a esquerda. Não percebo como as poderei eliminar.

Firefox
firefox

IE
ie

O meu código HTML é:

<div class="row ft_copyright">
    <div class="container-fluid rebordo rebordo_cr">
        <div class="rebordo_l rebordo_copyright"></div>
        <div class="rebordo_r rebordo_copyright"></div> 
    </div>

    <div class="container-fluid back_ft_cr">
        <p class="copyright">Copyright</p>
    </div>
</div>

O meu CSS é:

.ft_copyright { height: 33px; margin-top: -20px;}
.rebordo_copyright {background: url('assets/images/rebordo.png') 0px -20px repeat-x;}
.back_ft_cr {height: 76px; background: #848484; text-align: center; }
/*rebordos*/
.rebordo {height: 20px; margin-top: 0px; }
.rebordo_l { width: 50%; height: 20px; float: left; background-size: 68px 20px;   background-repeat: repeat-x; outline: 0; /* flip background vertically */ -webkit-transform:scaleX(-1); -moz-transform:scaleX(-1); -ms-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; }
.rebordo_r {width: 50%; height: 20px; float: right;  background-size: 68px 20px; background-repeat: repeat-x; outline: 0; }
5
  • Cara você verificou se não são problemas na imagem mesmo. Mas se não for, pode ser uma simples questão de alinhamento ou sua ou do próprio navegador. 6/03/2014 às 22:03
  • Isso ocorre porque neles é aplicado antialiasing enquanto o Chrome não aplica. 6/03/2014 às 22:05
  • Não são problemas na imagem, nem de alinhamento. Em provável que sejam de antialising. Como resolvo isso? 6/03/2014 às 22:15
  • Teria como fazer um exemplo no jsfiddle.net? 1/04/2014 às 23:27
  • mude o .ft_copyright pra 34 de altura e diga o que acontece.
    – Largato
    2/04/2014 às 3:14

2 Respostas 2

6

Como não foi disponibilizado um exemplo do código não posso garantir que irá funcionar, mas esse código abaixo desativa o antialiasing que deve ser a causa do problema: (fonte)

.rebordo {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor
}

Outra coisa que pode ser feita é ajustar a propriedade background-size evitando que ela altere o tamanho da imagem na direção que está o problema, algo que gera antialiasing.

Ainda outro motivo para que esses navegadores apliquem o antialiasing são as transformações CSS: você pode desativá-las e substituir a imagem no .rebordo_l.

Já que está usando CSS3 há uma propriedade interessante para esse caso: border-image. Com ela é possível especificar uma imagem para as bordas. Há uma demostração interativa para webkit além dos exemplos da MDN.

4
  • não resultou o código que desactiva o antializing, obrigado 6/03/2014 às 22:20
  • Como eu disse não posso garantir que irá funcionar. Editei procurando abranger todos os casos que geram antialiasing, assim como alternativas. 6/03/2014 às 22:27
  • tenho aquele efeito css3 no rebordo de modo a que este comece a aparecer da direita para esquerda, a haja bico no centro do ecrã 6/03/2014 às 22:29
  • Obrigado pela ajuda. 6/03/2014 às 22:31
3
+50

Se bem entendi, seu problema está ao centralizar a borda. A maneira mais limpa de fazer essa borda é a seguinte:

HTML

<div class="row">
    <div class="container-fluid ft_copyright">
        <p>Copyright</p>
    </div>
</div>

CSS

.ft_copyright {
    height: 76px; 
    margin-top: 20px; 
    text-align: center; 
    position:relative;
    background: #848484;
}
.ft_copyright:before {
    display: block;
    content: "";
    height: 20px;
    background: url('assets/images/rebordo.png') center 0px repeat-x;
    background-size: 68px 20px;
    outline: 0;
    position:absolute;
    top: -20px; 
    left: 0; 
    right: 0 
}
.ft_copyright p {
    color: #fff
}

Simplificando o seu código desta maneira não precisaria aplicar filtros, diminuindo seu CSS, aumentaria a velocidade de renderização da página, e tornaria seu código HTML mais semântico e menos poluído.

2
  • O padrão não fica centrado. No meu projecto isso é crucial pois a partir da repetição do padrão nasce o logo da marga que tem que ficar centrado. Obrigado pela ajuda. 5/04/2014 às 14:10
  • Afinal fica centrado, só que perde-se a opção de uso da imagem em sprite. Obrigado 5/04/2014 às 14:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .