RGBA Border Bug in Webkit Browsers

UPDATED October 30, 2011: This bug has been fixed in Chrome 15.0.874.106.

UPDATED August 16, 2011: This bug has been fixed in Safari 5.1 but not in Chrome.

Using Google Chrome or Apple Safari? I am using Chrome myself and recently, while I was working on a project, I attempted to use CSS3’s rgba feature on a 10px wide border. While this worked in Opera 11, Firefox 3.6.13, IE 8 & 9 – it did not work in Chrome 9 and Safari 5.

When viewed in Chrome or Safari, the borders appear to overlap in the corners. In the other browsers, the border is one solid line. After doing some searching I found out that I definitely was not the only person to notice this bug. Fortunately, people have submitted bug reports to Webkit about this issue. Hopefully, they will eventually fix the problem.

I have created a sample test page which shows a box with two divs. The main div has the rgba border while a second div holds the content. I have constructed the box like this because the background color of a box affects how the border is displayed when using rgba. I added text with large font at the top and used rgba in it’s color property to show that rgba works just fine.

When the bug is fixed, I will remove the page.


About gopha

Gopha is a web programmer, techie and heir to several Nigerian fortunes. In his spare time he likes to game, spend time with his wife, daughters and dogs. He eats [far too much], watches TV and lift weights. He also like to take moonlit walks on the beach and sing songs next to a roaring campfire, in a white sweater with his acoustic guitar. View all posts by gopha

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: