CODEWITHSUNDEEP
htmlcssfirefox
pixelfreak
pixelfreak

Reputation: 17844

White pure CSS triangle bug on Firefox 6 Windows

http://jsfiddle.net/pixelfreak/Eq246/

Notice the gray border on the white triangle. This only happens on FF 6 Windows (I did not test on older FF version)

Is there a fix to this? It looks like bad anti-aliasing or something.

Upvotes: 8

Views: 1585

Answers (3)

Basarium
Basarium

Reputation: 11

fixed with

border-style: solid dashed solid solid;

tested on firefox 19.0.2, opera 12.04, chromium 25.0.1359.0

Upvotes: 1

Ben Kimpel
Ben Kimpel

Reputation: 116

Give it a try with this:

border-style: outset;

http://jsfiddle.net/KDREU/

edit

Looks like if you put outset on one of the 4 border styles you can use colors other than white and not have them lightened.

/* This works for an orange down arrow that I'm using. */
border-style: solid outset solid solid;

http://jsfiddle.net/fEKrE/1/

Upvotes: 10

Bojangles
Bojangles

Reputation: 101543

It happens on FF6 on Linux too. It's going to be an artifact from antialiasing the diagonal line. AFAIK, there isn't a way around this other than to use an image.

Upvotes: 1

Related Questions