iOS 9 iPad空中文字阴影渲染文物

Question

使用html如下：

<h1>Lorem ipsum Incididunt minim enim pariatur ex in irure Duis deserunt.</h1>

和css：

h1 {
  color: #fff;
  font-size: 4em;
  font-family: sans-serif;
  text-shadow: 2px 2px 8px #000;
}

我在iPad air（1和2）上的iOS 9.3.2渲染中得到了一些奇怪的阴影伪影。该问题在iPad mini 1或2或iOS 10.1上无法重现。

我尝试改变阴影中的字体，线条高度，alpha透明度等...而罪魁祸首似乎只是使用任何带有原始h1元素的文本阴影（我假设其他元素）。当字体大小较大且文本颜色为白色时，问题似乎更容易重现，但肯定只有文本阴影属性（可能需要捏缩放一点来重新创建它）。

提供的屏幕截图中捕获的问题非常小，但是文字/字体大小不同，有时会更糟糕。

有没有人有关于根本原因的任何信息？有谁确切知道这会影响哪些设备/操作系统版本？有谁知道这个问题有什么好的解决方法吗？

jsfiddle：https://jsfiddle.net/t7ccn528/

Answer 1

尝试将h1定位为相对或绝对（取决于它在树中的位置）。然后添加一个顶部：0;

还可以尝试：

混淆H1上的字体平滑CSS属性，特别是subpixel-antialiased。分别和一起尝试这两个。我无法在Browserstack VM上复制，否则，我可能会想到这一点。