Antyaliasing na obróconym div z obrazem obramowania w Firefoksie
Mam div obrócony o 45 stopni, z obrazem granicznym na nim.
W przypadku chromu i safari wszystko wygląda dobrze.
W Firefoxie nieprzyjemne linie aliasingu pojawiają się wokół krawędzi obróconego div, między krawędzią a jego obrazem granicznym.
Oto prosty HTML:
<div class="container">
<div class="corner">
</div>
</div>
a oto CSS:
.container {
margin: auto;
width: 400px;
height: 400px;
background-color: black;
outline: 1px solid #333333;
position: relative;
overflow: hidden;
}
.corner {
position: absolute;
bottom: -68px;
right: -66px;
width: 86px;
height: 82px;
background-color: #F1F2F3;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
border-style: solid;
border-width: 14px 16px 28px;
-moz-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
-webkit-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
-o-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 fill repeat;
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
}
a oto JSFiddle. Spójrz na to w firefoxie, aby zobaczyć, co mam na myśli:
Widziałem wskazówki dotyczące dodawania przezroczystego obrysu 1px wokół div, który działałby, gdyby nie miał obrazu obramowania, jak w tym przypadku.
Ktoś wpadł na to wcześniej i wiedział, jak go posortować?