I'm creating a border on my site, with background . It works perfectly in Chrome, but in Firefox and IE unwanted lines appear. I have already noticed that they are present in the CSS3 property of transform: scaleX (-1); in the Div effect I need, also in other elements of the site so that the pattern starts from the center of the page from right to left. I do not understand how I can eliminate them.
Firefox
IE
If I understand correctly, your problem is when you center the border. The cleanest way to do this border is this:
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
}
Simplifying your code in this way would not have to apply filters, lowering your CSS, increasing page rendering speed, and making your HTML code more semantic and less polluted.
As an example of the code was not available I can not guarantee that it will work, but this code below disables antialiasing that should be causing the problem: ( source )
.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
}
Another thing that can be done is to adjust the background-size property by preventing it from changing the size of the image in the direction of the problem, something that generates antialiasing.
Yet another reason for these browsers to apply antialiasing is CSS transformations: you can disable them and replace the image with .rebordo_l .
Since you are using CSS3 there is an interesting property for this case: border-image . With it you can specify an image for the borders. There is an interactive demo for webkit in addition to the MDN examples.