How to remove bug from antialising lines generated in Firefox and IE?

Question

I’m creating a border on my website, with background image. Everything works perfectly in Chrome, but in Firefox and IE appear some unwanted lines. I have noticed that they are present in the CSS3 property of Transform:scaleX(-1); in the Div effect that 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 don’t understand how I can eliminate them.

Firefox

IE

My HTML code is:

<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>

My CSS is:

.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; }

Answer 1

As an example of the code has not been made available I cannot guarantee that it will work, but this code below disables the antialiasing which must be the cause of 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 property background-size preventing it from changing the size of the image in the direction of the problem, something that generates antialiasing.

Yet another reason these browsers apply antialiasing are the CSS transformations: you can disable them and replace the image in .rebordo_l.

Since you are using CSS3 there is an interesting property for this case: border-image. With it it is possible to specify an image to the edges. There is a interactive demo for Webkit in addition to the examples of MDN.

Answer 2

If I understand correctly, your problem is centering the edge. The cleanest way to make that edge is as follows:

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 this way would not need to apply filters, decrease your CSS, increase the page rendering speed, and make your HTML code more semantic and less polluted.