在 Safari 中使用多个大文本阴影复制文本答案

【问题标题】：Duplicate text with multiple large text-shadows in Safari在 Safari 中使用多个大文本阴影复制文本
【发布时间】：2016-11-05 01:02:29
【问题描述】：

在 Safari 9.1.1 中使用多个大文本阴影时，我遇到了一个奇怪的字体渲染问题。文本和阴影渲染良好，但看起来部分文本被复制到原始文本下方约 110 像素处。

这是一个问题示例（必须在 Safari 中查看）：

h3 {
  text-shadow: 0 0 40px #000, 0 0 80px #000;
}

<h3>
Testing multiple text-shadows
</h3>

重复文本的位置在实际文本下方约 110 像素处，并在第二个阴影的范围为 60 到 70 像素时开始出现。

第一个阴影的属性，第二个阴影的不透明度和位置没有任何影响。只有第二个阴影的字体大小和散布似乎有所不同。

我能够摆脱它的唯一方法是删除或减少文本阴影。

如果我添加第三个大文本阴影，我还能够使文本第二次复制。

有人见过这个吗？谁有解决办法？

【问题讨论】：

【解决方案1】：

我们在使用 D3.js 创建复杂的数据可视化时遇到了同样的错误。我们只能通过删除第二个text-shadow 来修复它。有一个bug reported for Webkit 看起来很相关，但是没有任何进展。

【讨论】：

【解决方案2】：

经过一点实验，似乎与文字阴影的模糊半径值有关。

对于您的特定情况，如果您将其更改为 h3 { text-shadow: 0 0 40px #000, 0 0 60px #000; } Safari 中的文本工件应该会消失。你会有两个阴影，但模糊不会那么大，所以 YMMV。

【讨论】：

【解决方案3】：

只需使用text-shadow: 0 0 40px #000;

【讨论】：