New FireFox v.27.0 Arrow Problem

[swiftusa]

Hello,
hint.css has been my very favorite tooltip script. I had been using hint for over a month.

I was using FireFox v.26.0 with no problems, but today morning FireFox automatically upgraded to v.27.0.

Now the shape of the tooltip arrow is crumbled, but the shape of the box is fine. This problem is only in FireFox and not in Chrome. I then tested this on a different computer with FireFox v.26.0 and the tooltip arrow was okay, I then upgraded the FireFox to v.27.0 and the same problem is replicated.

Can you please test hint.css on FireFox v.27.0 and share your experience?

Best Regards,
Sanson

[Chris Beck]

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

[swiftusa]

"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!

[Kushagra Gour]

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

[Chris Beck]

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

[swiftusa]

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.

[swiftusa]

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.

[Kushagra Gour]

@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.

[swiftusa]

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.

[swiftusa]

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 💯%.

:)

[Alfredo Amatriain]

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

[Jonatas Walker]

+1

[Kushagra Gour]

Is this issue still present on Firefox?

[Jonatas Walker]

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

[Jonatas Walker]

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.