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 相对或绝对定位（无论哪种适合它在树中的位置）。然后添加一个top:0;

还可以尝试：

弄乱了 H1 上的字体平滑 CSS 属性，特别是子像素抗锯齿。分别和一起尝试这两个。我无法在我的 Browserstack 虚拟机上进行复制，否则我可能能够解决这个问题。