8
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; }
Dude you checked if they’re not image problems even. But if it is not, it may be a simple matter of alignment either your or your own browser.
– Samir Braga
This is because they are applied antialiasing while Chrome does not apply.
– Gustavo Rodrigues
They are not image problems, nor alignment problems. In likely they are antialising. How do I solve this?
– user3216077
You could make an example in jsfiddle.net?
– Miguel Angelo
change . ft_copyright to 34 height and say what happens.
– Bacco