Works fine for me using Firefox Aurora (28.0a2 (2014-02-03))

"Firefox Aurora" is hardly used by 1% of internet users. Users just go to Google and search "Download FireFox" and they download FireFox v.27.0 Stable Release.

I would kindly request you to test on FireFox v.27.0
Please!

Let me test this on FF 27 and see whats wrong.

I installed FF 27. No issues with the arrow on either my custom styled internal version, nor on the demo at kushagragour.in.

Okay I installed "Firefox Aurora v.28.0a2" on a new PC and see the same problem.
Please refer the attachment to see the screenshot of what I am seeing.

As per http://stackoverflow.com/questions/7394872/how-do-i-make-a-css-triangle-with-smooth-edges
adding "-moz-transform: scale(.9999);" to the http://jsfiddle.net/kirkaracha/TMP7H/ works in FireFox.

But I am not good in troubleshooting CSS and I do not know where to add the fix in hint.css.

Please help.

@swiftusa Did you test the fix on your end? You can simple open the jsfiddle mentioned above and comment out the moz-transform property and see if it goes bad again.

The jsfiddle does not contain a " moz-transform" to comment out.

The http://jsfiddle.net/kirkaracha/TMP7H/ does not contain a "moz-transform"
When I add "-moz-transform: scale(.9999);" the jsfiddle triangle is smooth.

jsfiddle is only for your example and has nothing to do with hint.css.

I will need your help to identify where the "-moz-transform: scale(.9999);" has to be implemented in hint.css.

Okay I fixed it my self, and works perfectly on Firefox, Aurora and Chrome
But I have not tested on IE.

I First Removed border: 6px solid transparent; from the below line...

  .hint:before, [data-hint]:before {
    content: '';
    position: absolute;
    background: transparent;
    z-index: 1000001; }

Then Added The Following Lines

/**
 * set default color for tooltip arrows
 */
.hint--top:before {
  top: 0px;
  border-top: 6px solid transparent;
  border-right: 6px dotted transparent;
  border-left: 6px solid transparent;
  border-top-color: #383838; }

.hint--bottom:before {
  bottom: 0px;
  border-bottom: 6px solid transparent;
  border-right: 6px dotted transparent;
  border-left: 6px solid transparent;
  border-bottom-color: #383838; }

.hint--left:before {
  left: 0px;
  border-left: 6px solid transparent;
  border-top: 6px dotted transparent;
  border-bottom: 6px solid transparent;
  border-left-color: #383838; }

.hint--right:before {
  right: 0px;
  border-right: 6px solid transparent;
  border-top: 6px dotted transparent;
  border-bottom: 6px solid transparent;
  border-right-color: #383838; }

/**

Ref1: https://bugzilla.mozilla.org/show_bug.cgi?id=734748
Ref2: http://jsbin.com/opusan/1/edit

You will see that the above code variant does the same function as border: 6px solid transparent; the only change is dotted. Firefox requires one of the three elements to be dotted only then the jagged edges are fixed. I do not know why ??? but the problem is now FIXED 💯%.

:)

@swiftusa would you consider creating a PR so @chinchang can consider including it in a future release?

+1

Is this issue still present on Firefox?

Yeap. I've made the changes suggested and the triangle hint became much better.

After all, the changes made by @swiftusa looks fine in Firefox but looks horrible in IE 11 so I've made some tests.

If I set:

.hint::before, [data-hint]::before {
    border-style: inset;
 }

I have some different colors on triangle. Plunker.

-moz-transform: scale(.9999); is not an option since it conflicts with transform: translateY(...);

So I ended up (plunker) changing to:

.hint::before, [data-hint]::before {
    border: 8px solid transparent;
}
/**and some other changes***/

Tested in Firefox, Chrome and IE 11.