CSS 滤镜阴影在 Safari 浏览器中悬停时看起来不同，如何解决？

Question

我用滤镜阴影设计了悬停按钮的样式，如下所示：

-webkit-filter: drop-shadow(0 0 0px rgba(0, 0, 0, 0));
transition: transform .6s ease-in-out, filter .8s ease-in-out;
transform: translateZ(0);

}

    transform: scale(1.001) translateZ(0);
    -webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.8));
    filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.8));
}

它在所有浏览器上看起来都完美，除了 Safari...

悬停之前，它在 Safari 上看起来是一样的。尽管我使用 webkit，但悬停后它会得到这个奇怪的透明阴影。而且，在我删除光标后，它看起来不再像悬停之前一样。