CODEWITHSUNDEEP
firefoxantialiasingcss-transformscss
user3071264
user3071264

Reputation: 73

Anti-aliasing on rotated div with border image in firefox

I have a div rotated 45 degrees, with a border image on it.

In chrome and safari, it renders fine.

In firefox, nasty anti aliasing lines appear around the edge of the rotated div, between the edge of it and its border image.

Here's the simple HTML:

<div class="container">

   <div class="corner">

   </div>

</div>

and here's the 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;
}

and here's a JSFiddle. Look at it in firefox to see what I mean:

http://jsfiddle.net/uAF2u/

I've seen the tips for adding a transparent outline of 1px around the div, which would work if it didn't have a border image as in this case.

Anyone run into this before and know of a way to sort it?

Upvotes: 6

Views: 11588

Answers (4)

jj2020driver
jj2020driver

Reputation: 57

I have the same problem with Firefox and Safari. 1 thin line between sibbling divs.

Try also different combinations of:

border-radius: 2px 0 0 0;

or

border-radius: 0 1px 0 0;

on problematic element.

This seems to work primarily in Firefox and a bit in Safari. In Safari you also have to cause overlapping positioned elements.

Upvotes: 0

han
han

Reputation: 1

I had a very similar issue in Firefox, in which the transforming div was having a thin border outline, I fixed it by giving the div a transparent border. May be this can help.

Upvotes: 0

theo
theo

Reputation: 137

transform: rotate(0.0005deg);

FireFox 34

This works for me.

Upvotes: 0

vals
vals

Reputation: 64164

Adding a translateZ seems to quick in a more accurate display and solve the issue:

-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: translateZ(1px) rotate(45deg);

updated fiddle

I added the translate in the transform since firefox has been going un-prefixed for 10 versions now.

Upvotes: 22

Related Questions