HTML5 Zone is brought to you in partnership with:

Catalin Rosu, a.k.a Red, is a professional web designer and developer who loves to be creative and enjoys CSS techniques. You can find articles and tutorials on front-end web development by visiting his blog at red-team-design.com. Also, you can connect with him on Twitter as @catalinred. Catalin is a DZone MVB and is not an employee of DZone and has posted 26 posts at DZone. You can read more from them at their website. View Full User Profile

CSS Diagonal Borders Still Not Rendering Properly on Firefox

12.11.2012
| 3442 views |
  • submit to reddit

The title pretty much says it all. These days I was working on a small web project and while creating the so well known triangle effect using CSS borders I’ve noticed some rendering inconsistencies on Firefox I thought they were fixed by now.

CSS borders on Firefox

View demo

Mozilla’s Firefox is one of the browsers that use anti-aliasing for CSS diagonal borders. But, there’s no problem at all with anti-aliasing for diagonal borders as long as the rendering is made accordingly. IE9 and IE10, the other browsers who use anti-aliasing, do it correctly but unfortunately at this time Firefox don’t.

First issue

I read and tweeted a while ago a good article by Chris Morgan where he explains how and why CSS’s “transparent” may not be transparent, especially on diagonal borders.

Let’s say you have the following CSS triangle made with:

div {
	border-top: 150px solid transparent;
	border-left: 150px solid red;
}

This is equivalent to:

/* red = rgba(255, 0, 0) */

div {
	border-top: 150px solid rgba(255,0,0,0);
	border-left: 150px solid red;
}

CSS borders on Firefox - transparent versus RGBA

Workaround

So, to make it work nicely also in Firefox, you need to avoid the use of transparent value and use instead the appropriate RGB color with alpha = 0.

CSS tip

The transparent value is equivalent to rgba(0, 0, 0, 0).

Second issue

In my small project I was telling you earlier, I use an abstract block delimiter built with a CSS border triangle. The thing is that my block is quite large, as it’s meant to break two sections of a website.

Here’s the block delimiter example:

div {
    border-top: 70px solid rgba(0, 255, 0, 0);
    border-left: 600px solid green;
}

CSS borders on Firefox - large border example

If you’re using Firefox, you can notice a blurry transition on the diagonals caused by the anti-aliasing. That’s quite annoying and the RGBA trick does not solve it.

My workaround

What does it is a dirty workaround I discovered while playing with it: -moz-transform: scale(.9999). Apparently, a small scaling is applied but visually you won’t see the difference. Also, technically you wouldn’t need the prefix for this transformation as Firefox support it unprefixed since version 16.

But, since this is a Firefox only hack, I think using the prefixed version is a good idea.

div {
    border-top: 70px solid rgba(0, 255, 0, 0);
    border-left: 600px solid green;
    -moz-transform: scale(.9999);
}

Firefox testing

Bad behavior on:

  • Mozilla Firefox 17.0.1
  • Mozilla Firefox 18.0 – beta channel
  • Aurora 19.0a2 (2012-12-06)

As far as I tested, it seems that this behavior is fixed on Mozilla Firefox Nightly 20.0a1. So that’s really good news, even if we’ll have to wait a bit ’til Mozilla Firefox release hits that version.

View demo

That’s it

If you’re like me and like all these CSS small thingies, then you’ll enjoy this article. Don’t hesitate to leave a comment and thanks for reading!




Published at DZone with permission of Catalin Red, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)