“background-clip：text”有奇怪的行为

Question

我正在使用一个使用-webkit-background-clip:text的css和polyfill的页面，以使其在不支持此功能的浏览器中运行。

显然，有些浏览器使用Webkit（Chrome，Opera和Safari），有些浏览器不使用（Firefox，IE），我希望页面显示相同（给出或拍摄背景剪辑）但是这不是发生在Firefox上。我正在使用的polyfill工作，但在Firefox中非常奇怪地翻译文本。奇怪的是，IE工作（尽管polyfill没有）。

这是Firefox：

这是一个Webkit浏览器：

最后这是IE：

我使用的polyfill是https://github.com/TimPietrusky/background-clip-text-polyfill

我已经尝试联系那个制作但却无法得到任何回复的人。

基本上，我根本不知道为什么Firefox会翻译文本。我希望它既可以充当Internet Explorer，也可以将文本显示为白色，或者正确显示它。

我该怎么做？

如果你需要一个页面可以解决问题，那么对于一个jsfiddle来说太多了，但可以找到指向该页面的链接here。

Answer 1

您的polyfill为Firefox创建了一个SVG，但似乎并没有做得很好。删除 来自SVG元素的overflow: hidden（在svg.css中设置）将显示所有生成的SVG。