CSS渐变链接文本在悬停时跳转

Question

我在悬停时为链接使用渐变文本颜色，但是自从我添加css类以来，就发生了奇怪的跳转效果。每当我将链接悬停时，链接就会像2px-4px一样跳跃。

当我删除渐变颜色类别时，一切又恢复正常了。有没有解决办法？我添加的自定义代码：

.bg-gradient-ligth {
  background-color: $white;
  background-image: linear-gradient(315deg, $white 0%, $ligth-grey 74%);
}

a {
  color:$green
}

a:hover {
  background: -webkit-linear-gradient($gradient1, $gradient2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.heading-gradient {
  background: -webkit-linear-gradient($gradient1, $gradient2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

其余的只是普通的Bootstrap和主题CSS。以前工作正常。顺便说一句，它还在底部切断了渐变h1标题的文本。