Pure CSS triangle looks blurry in firefox

Question

I'm trying to use the pure css triangle used in this article in CSS tricks http://css-tricks.com/snippets/css/css-triangle/ but the look blurry in firefox 14. Can I fix it somehow or is it just that FF doesn't render it correctly?

EDIT: Here's an screenshot of how it looks like http://awesomescreenshot.com/0fcf904eb I thought it was a general issue so I just put a link to the article sorry about that

Answer 1

use border-style: dotted; will get rid of the blurry edge on FF. Basically, anything but border-style: solid; should work. It might be fixed in FF latest but I definitely experienced the same problem as you, but couldn't test on different FF versions.

For the record I was on FF (15 I guess) winXP

Answer 2

I was having the same issue. Turns out it was something with my Graphics Driver.

Check the Anisotropic Filtering settings in your 3D Graphic Driver. I had mine set to Override Application Settings and 16x. After changing it back to Use Application Settings and restarting Firefox, the blurriness went away.

Answer 3

Screen grab would be good. This might be something that will differ from device to device, monitors, etc. Have you looked at your results on different devices? I'd tend to think that this will be beyond your control.

Answer 4

-moz-transform: scale(.9999);

I got the issue solved.