Weird Dark Border :after Css Arrow In Firefox

In an attempt to make an arrow in pure CSS for my tooltip, I ran across a problem in Firefox: I tried to find what was causing the dark border in Firefox without success. Here is

Solution 1:

2015's EDIT

Now it works by using both RGBa and transparent; appearently, the Bug has been resolved (maybe incidentally, because it is still in state NEW , instead that on FIXED).

If it still happens to you, you're probably running an old FireFox version (the current one is 38.0.5), and you can use the workaround in the answer to overcome the problem.

---

It is the

Bug 646053 - dark diagonals at corner joins adjacent to transparent borders

The workaround is to use RGBa instead of transparent:

/* old */border: transparent solid 6px;
border-right-color: #fff;

/* new */border: rgba(255,255,255,0) solid 6px;
border-right-color: #fff;