Css Safari上的模糊文本

我对这篇文章不太满意

我已经通过一些图坦卡蒙，教如何应用梯度的动态文本。这很有效，但Safari似乎不能很好地处理它

铬渲染

Safari渲染

两个问题：元素顶部的这一行，看起来像是

-webkit背景剪辑：text的bug，但这个问题比较小，因为我可以解决它。但真正的问题是文本模糊

CSS

我的小提琴：

编辑

我遵循了麦克拉斯基姆关于将
行高度
从
1em
更改为
50px
的提示，因为它可能处于半像素高度不起作用
我注意到，在调整浏览器大小时，字体会稍微变好，但一旦停止，字体会再次变得模糊
有一个技巧可以让浏览器加速图形，它让字体看起来更好：

     -webkit-transform: translate3d(0,0,1px);
        -moz-transform: translate3d(0,0,1px);
         -ms-transform: translate3d(0,0,1px);
          -o-transform: translate3d(0,0,1px);
             transform: translate3d(0,0,1px);

结果是：
由此


它是这样的

我看不出我这边有什么不同。您使用的是高DPI的显示器吗？简单看一下browserstack（从我拍摄打印屏幕的地方）就会发现渲染文本之间的差异。如果你正在谈论我在这里附加的图像，你可以点击它们以自然分辨率查看图像。您将看到差异。可能与文本位于半像素上有关，因为使用em表示
行高
，这通常是在元素上使用变换的结果。尝试将
行高
硬编码为整数像素量，看看是否有帮助
     -webkit-transform: translate3d(0,0,1px);
        -moz-transform: translate3d(0,0,1px);
         -ms-transform: translate3d(0,0,1px);
          -o-transform: translate3d(0,0,1px);
             transform: translate3d(0,0,1px);