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 的 bug 吗，有办法避免吗？当然，我可以删除 box-shadow，因为它无论如何都被剪掉了，但看看是什么原因造成的仍然很有趣。

Answer 1

原来是firefox的bug。 Here 是 bugzilla 问题

Firefox 剪辑路径 + 框阴影错误

Firefox clip-path + box-shadow bug

css

svg

firefox

clip-path