Firefox和线性渐变作为背景（创建一个..边框？）

Question

请参阅我的jsfiddle以查看问题。关于这个仅在Firefox中发生的原因的任何线索在Chrome和IE中都很好吗？

似乎会产生问题的CSS：

background-color: #2A2A2A;
background-image: linear-gradient(45deg, #2E2E2E 25%, transparent 25%, transparent 50%, #2E2E2E 50%, #2E2E2E 75%, transparent 75%, transparent);
background-size: 20px 20px;

---

将定义更改为（无透明度）：

background-color: #2A2A2A;
background-image: linear-gradient(45deg, #2E2E2E 25%, #2A2A2A 25%, #2A2A2A 50%, #2E2E2E 50%, #2E2E2E 75%, #2A2A2A 75%, #2A2A2A);
background-size: 20px 20px;

似乎解决了这个问题，但我真的很想知道为什么。

Answer 1

询问了一位朋友，他是一位开发人员并且他将我this article联系起来。事实证明它是rgba的问题，因为它呈现颜色之间的过渡，因为＆＃34;透明＆＃34;定义不同（即Firefox中的透明黑色）我们得到黑色＆＃34; border＆＃34;。

另一篇讨论此事的帖子发现here。