Html -webkit背景剪辑在Safari中不起作用

下面的代码适用于Chrome，但不适用于Safari。我不知道为什么，所以任何帮助都将不胜感激。可以在上找到实时演示（当问题仍然存在时）。可以找到屏幕记录

CSS:

正文{
背景色：红色；
}
.按钮{
利润率：10px；
填充：10px 20px 10px 20px；
字体大小：4vmin；
字号：100；
边界半径：10px；
边框宽度：1px；
边框颜色：透明；
颜色：白色；
文本阴影：0px 0px 6px rgba（255，255，255，1）；
背景剪辑：文本；
-webkit背景剪辑：文本；
过渡：框阴影，背景色；
过渡时间：0.5s；
-webkit过渡：框阴影，背景色；
-webkit转换持续时间：0.5s；
过渡时间功能：轻松；
-webkit过渡计时功能：轻松；
}
.按钮：悬停{
过渡：框阴影、背景色、文本阴影、颜色；
过渡时间：0.5s；
-webkit过渡：框阴影、背景色、文本阴影、颜色；
-webkit转换持续时间：0.5s；
过渡时间功能：轻松；
-webkit过渡计时功能：轻松；
文本阴影：无；
}
@媒体（悬停：悬停）{
.按钮：悬停{
背景剪辑：文本；
-webkit背景剪辑：文本；
背景色：黑色；
颜色：透明；
文本阴影：无；
盒子阴影：0px 0px 10px-5px白色，嵌入0px 0px 200px-50px白色；
}
}

关于我

看起来悬停时的“透明”颜色在不同浏览器中的处理方式有所不同。您可以更改CSS以选择您想要的文本颜色，这将适用于Chrome和Safari

@media (hover: hover) {
    .button:hover {
        background-clip: text;
        -webkit-background-clip: text;
        background-color: black;
        color: black; /* change this color */
        text-shadow: none;
        box-shadow: 0px 0px 10px -5px white, inset 0px 0px 200px -50px white;
    }
}

---

事实上，我认为是过渡而不是背景剪辑导致了这个问题。请参阅有关Safari 11和过渡的说明。我从类按钮（而不是悬停类）中删除了过渡效果，这使效果有所不同@RachelGallen这很奇怪，因为jsbin在Safari上对我不起作用。它可以在Chrome上运行，但不使用Safari。也许这是你的Safari版本。如果可能的话，升级它。@RachelGallen我相信我是最新的。在iOS 12上，Chrome和Safari都会出现这种情况，因此这是Webkit兼容性的问题。谢谢，这几乎可以实现，但它不会产生Chrome的剪切效果，这正是我想要的。请解释“剪切效果”，我会再看一看。如果你在Chrome上查看网站并将鼠标悬停在按钮上方，您将看到文本似乎是从框阴影中“剪切”出来的，因此显示了一点渐变，同时仍然可读，看起来很棒。