Firefox 剪辑路径 + 框阴影错误

Question

我正在使用 clip-path 属性制作不规则形状的元素，如下所示：

#triangle {
   background-color: indigo;
   clip-path: url(#shape);
   height: 200px;
   width: 400px;
}

<div id="triangle"></div>
<svg width="0" height="0">
    <defs>
      <clipPath clipPathUnits="objectBoundingBox" id="shape">
         <polygon points="0 0, 1 0, 1 1"></polygon>
      </clipPath>
    </defs>  
</svg>

但碰巧的是，页面上具有这种形状的元素之一也应用了 box-shadow：

#triangle {
   background-color: indigo;
   clip-path: url(#shape);
   height: 200px;
   width: 400px;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

<div id="triangle"></div>
<svg width="0" height="0">
    <defs>
      <clipPath clipPathUnits="objectBoundingBox" id="shape">
         <polygon points="0 0, 1 0, 1 1"></polygon>
      </clipPath>
    </defs>  
</svg>

阴影显然是不可见的，因为 clip-path 剪掉了它。当我在 MS Edge 或 Chrome 中使用它时，一切都很好，有一个带有锐角的三角形，没有应有的可见阴影。在 Firefox 上，第一个片段的工作方式相同，就好了。但是第二个片段在 Firefox 上呈现梯形而不是三角形，就像在图像上一样。一旦 box-shadow 属性被禁用，它就会消失。而且 box-shadow 甚至不像三角形那样是 indigo 颜色，它是透明的黑色

这是一个 Firefox 错误，有没有办法避免它？当然我可以删除 box-shadow，因为它无论如何都被剪掉了，但看看是什么原因仍然很有趣。

Answer 1

事实证明，这确实是 Firefox 中的一个错误。 Here 是 bugzilla 问题