Html -webkit背景剪辑：在mozilla中，带有转换的元素上的文本在转换结束后不起作用，但在chrome中却可以完美地工作

我已经在元素上应用了-webkit background clip:text属性。此元素也具有转换属性。webkit背景剪辑属性在过渡期间工作正常，但在过渡结束后，它在mozilla firefox中不再工作，而在chrome中工作正常。请帮我做这个

当我用动画属性代替过渡时，效果很好。但我对过渡性质很好奇。 编辑：如果我不使用transition属性，该代码段在mozilla web xbrowser中可以正常工作

我希望在Firefox中过渡结束后，渐变保持在文本上

div{
高度：200px；
边缘顶端：2rem；
填充权：3rem；
垫底：1.5rem；
显示：内联块；
字体大小：10rem；
位置：相对位置；
背景图像：线性渐变（向右，红色，绿色，蓝色，金色，粉色，紫色，紫色）；
-webkit背景剪辑：文本；
颜色：透明；
边框：1px纯红；
转变：转变3s；
}
div:悬停{
转换：translateX（500px）；
}

---

测试

，因为您似乎遇到了Firefox bug。问题似乎与

转换无关，但根据基于您的代码片段的测试，Firefox似乎拒绝呈现
-webkit背景剪辑：翻译超过一半宽度的元素的文本
：


onload=function（）{
document.querySelectorAll（'input'）.forEach（i=>i.oninput（））}
#t{
显示：内联块；
背景图像：线性渐变（向右，红色，红色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
转化：translateX（61px）；
轮廓：1px纯红；
字体大小：100px；
颜色：绿色；
字体系列：monospace
}


翻译：


内容：

宽度：
可能与@Matt.Hamer5重复感谢您的审阅，但它不同，因为如果我不使用transition属性，代码片段在mozilla web浏览器中可以正常工作。（因为这不是答案，只是问题中的一个精炼信息，如果您觉得它与问题匹配，请随意在那里容纳它，我将删除它。同时，我将查找/填写bugreport。）你很好地解释了这个问题，我不知道它的根本原因。谢谢。现在我知道为什么会发生这种情况。我尝试更改容器宽度，但仍然没有成功，我认为它可能会起作用。是的，它似乎真的是链接到文本节点的边界框而不是容器，是什么让它更奇怪。我想现在尝试这样的方法rkarounds是毫无意义的，唯一可行的方法是放弃转换而求助于位置：（是的，这种方法需要一些性能：/我认为这就是现在的答案。谢谢：）