DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Languages
  4. CSS Diagonal Borders Still Not Rendering Properly on Firefox

CSS Diagonal Borders Still Not Rendering Properly on Firefox

Catalin  Red user avatar by
Catalin Red
·
Dec. 11, 12 · Interview
Like (0)
Save
Tweet
Share
6.58K Views

Join the DZone community and get the full member experience.

Join For Free

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!




CSS

Published at DZone with permission of Catalin Red, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • What Is Policy-as-Code? An Introduction to Open Policy Agent
  • Web Application Architecture: The Latest Guide
  • Secrets Management
  • Apache Kafka vs. Memphis.dev

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: