Javascript文本效果可以在Firefox上使用，但不能在Chrome上使用

Firefox似乎能够正确显示动画：

但是Chrome似乎没有正确地显示它们，而且它也没有像“hello”那样以渐变背景显示

，但是

span

文本在那里：

这是我从中使用的Javascript代码

这是我目前正在使用的HTML代码，其中

.ml3

仅使用草书字体设置文本样式，并且在Javascript代码中用作目标

<div class="jumbotron w-75 mx-auto text-center">
    <h1 class="ml3 gradient-text-1">hello</h1>
</div>

你好

---

我不知道如何使Chrome上的动画与Firefox相同，因为这正是我想要的。有人能帮忙吗？

建议提供测试用例。您的样式代码应编写如下：

.gradient-text-1 {
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
    text-fill-color: transparent;
    background-size: 100%;
    background-image: linear-gradient(60deg, #4dacfa 0%, #c0e994 100%);
}

---

大家好，欢迎来到Stack Overflow！你能提供一个测试这个的HTML示例吗？（你的HTML）嗨！我已经用我正在使用的HTML编辑了这篇文章。我有一种感觉，这可以归结为Chrome和Firefox如何在

span

中渲染渐变背景。它对你有用吗？梯度也可以，但“hello”有点太短，看不到效果。不幸的是，它仍然不起作用。我放弃了这个实现，而是先让文本呈现为

文本填充颜色：inherit

，然后当Javascript动画完成后，我运行CSS动画以

文本填充颜色：transparent

。不同的风格，但它主要完成我想要的。谢谢你的帮助！

<div class="jumbotron w-75 mx-auto text-center">
    <h1 class="ml3 gradient-text-1">hello</h1>
</div>

.gradient-text-1 {
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
    text-fill-color: transparent;
    background-size: 100%;
    background-image: linear-gradient(60deg, #4dacfa 0%, #c0e994 100%);
}