4

I have different widths for borders applied to a div, and only Firefox shows thin seams when the div is rotated to any angle using CSS3 Transition Rotate. These thin seams change slightly depending on angle.

If the borders are the same width, Firefox behaves nicely.

The div is not using an image, just a colored background, but the content seems irrelevant for the border of different widths issue I'm having.

Unfortunately the area behind the border is going to be reserved so I'm not able to use another div as a wrapper.

Here's a jsFiddle of an example to be seen in Firefox that has this issue. There are no issues in Chrome.

Status Update: Updated jsFiddle to show border-style prior to border-color per CSS rule but no change.

I wonder if this issue is because border-image property, which I am not using, allows up to eight images, one for each border slice. That said, if there were border-corner-color properties then that would solve the issue when using Rotate.

arttronics
  • 9,957
  • 2
  • 26
  • 62

2 Answers2

3

I have made a solution using :before in CSS: jsFiddle example.

I added this code:

#thinLinesInFirefox:before {
    content: '';
    display: block;
    width: 201px;
    height: 201px;
    position: absolute;
    top: -105px;
    left: -120px;
    border-top:    104px;
    border-right:  110px;
    border-bottom: 115px;
    border-left:   119px;

    /* Define border-style before border-class per CSS rule. */    
    border-style: solid;

    /* Define boder-color */
    border-color: black;

    z-index: -1;
}

Basically, it overlays the same square using :before, except I have decreased the border-top and border-left by 1 pixel, and then increased the width and height by 1 pixel so that the 'real' div underneath appears to be the same size.

Because of the different borders, the seams are in slightly different positions, so what is underneath doesn't show.

uınbɐɥs
  • 7,236
  • 5
  • 26
  • 42
  • Oops, I didn't notice that because of the overlay, text is not selectable and links won't be click-able... – uınbɐɥs Jul 25 '12 at 21:17
  • **+1** Excellent Answer! Adding `z-index` to your markup allows text to be selectable and this is the best work around until Firefox (v16 expected) has capability to address this issue directly. Reference: [**jsFiddle**](http://jsfiddle.net/tpDyA/6/) – arttronics Jul 25 '12 at 23:34
  • @arttronics - That's strange, I tried using `z-index: -1` and it didn't work, but it works in your fiddle! Also, I am using Firefox Aurora 16.0a2 (2012-07-25), and it isn't fixed yet... – uınbɐɥs Jul 26 '12 at 01:07
  • 1
    Firefox of late is having issues. The recent release v14 stable has a CSS3 transform issue (and it's not about the skew() that's been removed) for this unrelated jsFiddle that works in [**Firefox V13 and Chrome**](http://jsfiddle.net/GEUvZ/7/). Firefox v16 road-map is to have additional CSS3 rules available and when applied should resolve this Question's issue (i.e., turn off hardware antialiasing). – arttronics Jul 26 '12 at 02:43
0

Those look like antialiasing artifacts from painting the border in several separate pieces. Each piece is being rotated, so its edges get antialiased, with the result that some pixels at the join are partially transparent (because they're the result of painting two partially-transparent pixels on top of each other).

There is no problem on this testcase in Chrome because at corners it paints the borders under each other. Of course that causes non-opaque borders to be totally broken in Chrome; see http://snook.ca/archives/html_and_css/safari-transparent-borders

And if you were to make the border colors slightly different, you'd get seams in WebKit too. See http://jsfiddle.net/YVCeX/ (it shows seams in the div's background color, whereas Firefox optimizes away background painting under opaque borders, which is why you're seeing red seams, not blue ones.

There's really no good way to handle this, in general, without turning off antialiasing for border edges and having jaggy borders when rotated.

Boris Zbarsky
  • 34,758
  • 5
  • 52
  • 55
  • I didn't know Chrome has a border-color bug when used with CSS3 Rotate with border having different or same width. See this update to your [jsFiddle](http://jsfiddle.net/YVCeX/5/) which uses a image instead of background-color and reveals the image even if max image is confined to specific dimensions. Setting image with background-attachement to local then bleeds only body background-color. However, I don't intend to have multicolor borders and no image content, so if you can update my jsFiddle showing how to turn off anti-aliasing for border edges that is exactly what I need, jaggies and all. – arttronics May 24 '12 at 23:43
  • You can't turn off the antialiasing yourself... the point is, browsers would have to opt for more jaggy rendering if they wanted to eliminate these seaming effects. – Boris Zbarsky May 25 '12 at 01:42
  • I remember reading that Chrome does not apply anti-aliasing on Rotated images [here](http://stackoverflow.com/a/6898097/1195891) unlike Firefox. That SO Post says to use **backface-visibility: hidden;** to turn off anti-aliasing. This works for both your [jsFiddle](http://jsfiddle.net/YVCeX/9/) and my [jsFiddle](http://jsfiddle.net/YVCeX/8/) but not in Firefox. – arttronics May 25 '12 at 01:58