css – iOS 9 iPad空中文字阴影渲染伪装

用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上的iOS 9.3.2版本(1和2)上渲染了一些奇怪的影子文物. iPad mini 1或2或iOS 10.1上无法重现问题.

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

提供的截图中捕获的问题是相当小的,但是使用不同的文本/字体大小,有时会更糟.

有人有任何关于根本原因的信息吗？有谁知道什么设备/ os版本影响？有人知道有什么好的解决方法吗？

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

解决方法

尝试将h1定位为相对位置或绝对位置(以树为准).然后添加一个顶部：0;

还试试：

与H1上的字体平滑CSS属性混合,特别是子像素 – 抗锯齿.分别一起尝试这两个.我无法在我的browserstack虚拟机上复制,否则,我可以想出这一点.

原文地址：https://www.jb51.cc/css/216409.html