css - 尽管兼容(显然？)，但剪辑路径在 Firefox 中不起作用

Question

我无法获取 Firefox 工作的剪辑路径。据我所知，它是兼容的，尽管我无法弄清楚为什么它不起作用，而且据我所知，这不是一个很常见的问题。它在 chrome 上运行良好。有什么我想念的吗？

#rectangle {
    transform-origin: top left;
    padding-right:200px;
    top:70px;
    -webkit-clip-path:inset(0px 100% 0px 0px);
    clip-path:inset(0px 100% 0px 0px);
}

Answer 1

我遇到了同样的问题。如果您滚动到 Clip-Path MDN 页面的底部 https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path您可以看到，尽管在文章本身的一些示例标记中使用了 inset，但 Mozilla (Gecko) 不支持 inset。

以下是其进展的脚注...[5] 自 Gecko 47 (Firefox 47.0/Thunderbird 47.0/SeaMonkey 2.44) 以来，此功能在首选项 layout.css.clip-path-shapes.enabled 之后实现，默认为 false。除 inset() 之外的基本形状在错误 1075457 中实现，inset() 在错误 1246762 中实现。自 Gecko 53(Firefox 53.0/Thunderbird 53.0/SeaMonkey 2.50)以来，Nightly 和 Developer Edition(错误 1303654)上的首选项默认为 true，因为Gecko 54(Firefox 54.0/Thunderbird 54.0/SeaMonkey 2.51)它在 Beta 和 Stable 上也默认为 true 发布错误 1247229。

一种可能的解决方法是使用多边形而不是插图来创建矩形剪辑。希望这会有所帮助，并且可能其他人可以在这里提供更好的答案，因为我仍然很好奇并想出解决方法。也许有一个 polyfill？