视网膜显示屏上的 Chrome 文本阴影错误答案

【问题标题】：Chrome Text Shadow Bug on Retina Display视网膜显示屏上的 Chrome 文本阴影错误
【发布时间】：2017-01-26 16:12:28
【问题描述】：

Codepen 链接：https://codepen.io/calebzahnd/pen/OWxxLw

h1 {
  max-width: 800px;
  font-family: sans-serif;
  font-size: 90px;
  font-weight: 900;
  text-shadow: 0 0 50px #000;
}

截图：

在 Retina 屏幕上显示时，我发现 Chrome 浏览器中的一个错误是我只能想象的。文本阴影上有一个奇怪的剪辑，文本阴影本身被推到实际文本下方。调整字体大小时，剪裁会随机更改为仅剪裁某些字符。如果您调整文本阴影的蓝色值，某些值会将阴影捕捉回它应该位于的位置，但没有任何押韵或原因。我已经检查过了，这在 Safari 和 Firefox 上显示良好。有人可以解释这里发生了什么吗？

【问题讨论】：

标签： html css google-chrome retina-display

【解决方案1】：

我可以在我的 Retina 显示屏上完美地看到 Chrome 和 Safari 浏览器中的文本阴影。尝试更新您的浏览器和/或清理您的缓存。

【讨论】：

在其他视网膜显示器上查看时，似乎不一致。一些显示器正确显示它，而另一些则剪辑阴影，以及它在何处以及如何剪辑阴影似乎也不一致。

【解决方案2】：

h1 {
	max-width: 800px;
	font-family: sans-serif;
	font-size: 90px;
	font-weight: 900;
	text-shadow: 0 0 50px #000;
        margin-left:25px;
}

&lt;h1&gt;This is what you want everyone to see&lt;/h1&gt;

问题是有这么大的阴影，而文字正好靠在像素边缘。某些设备/浏览器不会渲染超出窗口或 div 的像素边缘。我的建议是在文本左侧留出 25 像素的边距。甚至可能有 25 个。

【讨论】：