Problem with fuzzy firefox :after arrow rendering?

firefox-fuzzy.md

#Fixing fuzzy CSS triangles in Firefox

References http://stackoverflow.com/questions/12301366/pure-css-triangle-looks-blurry-in-firefox.

Thanks to http://stackoverflow.com/users/295770/luca

This problem references my earlier gist (https://gist.github.com/carlwood/5663616) where I created css triangles to display a selected link - which would open a dropdown.

Original SCSS source code:

.selected {

  &:after {
    // Draw a standard upward-facing arrow
    border-right: 14px solid transparent;           
    border-left: 14px solid transparent;
    border-bottom: 8px solid #303030;
    position: absolute;
  }
  
}

The arrow edges are fuzzy on Firefox.

To fix it, we need to change the transparent borders to dotted style instead of solid.

&:after {
  border-right: 14px dotted transparent; // solid -> dotted      
  border-left: 14px dotted transparent; // solid -> dotted
  border-bottom: 8px solid #303030;
  position: absolute;
}

Tested on Firefox 21.0

Hmm, seems to not work for latest FF version *27.0.1