Unexpected border on triangle in FF4

Forum Moderators: not2easy

Message Too Old, No Replies

Unexpected border on triangle in FF4

border transparent

cranfan

5:00 pm on Dec 8, 2011 (gmt 0)

Any ideas why the following code (to draw a triangle with CSS) has an unexpected dark border along the hypotenuse in FF4 but not previous versions of FF or any of the other mainstream browsers?

Thanks.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Triangle with unexpected border in FF4</title>
</head>

<body style="background-color: #FFFF99;">
<div style="width: 0px; height: 0px; border-bottom-width: 100px; border-bottom-style: solid; border-bottom-color: transparent; border-left-width: 350px; border-left-style: solid; border-left-color: #FFFFFF;"></div>
</body>

</html>

penders

7:03 pm on Dec 8, 2011 (gmt 0)

I'm unable to test FF4, but I appear to see a similar thing in FF8 (Vista). It looks like FF is attempting to anti-alias the jaggies?! And it is failing somewhat along the transparent edge. Whilst this seems to work OK on the light (yellow to white) side, on the other (white to yellow - transparent) side a dark line appears.

Looking more closely at a page of CSS shapes in FF8, that I did a while back, I see similar issues. Depending on the colour used it is more noticeable. With yellow it is very noticeable!

I'm guessing that earlier (than FF4) browsers did not attempt to anti-alias these diagonals?

One workaround appears to be to not use transparent, but explicitly specify the same colour as the background!

cranfan

10:06 am on Dec 9, 2011 (gmt 0)

Thanks penders.

I have a background image behind it so I can't really go that route.

However, it has since been pointed out to me that if you change the border-bottom-style to "dotted" it works ok.

It seems to work still in the other browsers. So, at the moment I have not come across any drawbacks.

penders

2:50 pm on Dec 9, 2011 (gmt 0)

Thanks for the update - yes, border-style:dotted seems to work pretty well.

(For anyone else trying the above example, it must be rendered in standards mode ie. with a valid DOCTYPE for it to render OK in IE.)