Question

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 a jsfiddle and a running snippet demonstrating the problem:

.tooltip {
    position:relative;z-index:1;
    display:inline-block;padding-right:10px;
}
.tooltip .info {
    position:absolute;left:100%;top:-7px;
    display:block;padding:7px;border:1px solid #cccccc;
    background:#fff;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow:  1px 1px 8px 0px rgba(0, 0, 0, .2);
    box-shadow:  1px 1px 8px 0px rgba(0, 0, 0, .2);
}
.tooltip .info img {float:left;}
.tooltip:after {
    content: '';
    position:absolute;top:0;left:100%;
    display:block;
    width:0;
    height:0;
    margin-left:-13px;
    border:0 solid transparent;
    border-right-color:#cccccc;
    color:#ccc;
}
.tooltip .info:after {
    content: '';
    position:absolute;top:7px;left:-12px;z-index:10;
    display:block;
    width:0;
    height:0;
    border:transparent solid 6px;
    border-right-color:#fff;
    color:#ccc;
}

<a class="tooltip">Test for tooltip<span class="info">My tootip information</span></a>

This second demo demonstrates that background transparent is the root cause as replacing transparent by a color results in the same render in Chrome and Firefox.

Answer 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;