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版本影响?有人知道有什么好的解决方法吗?

jsfiddlehttps://jsfiddle.net/t7ccn528/

解决方法

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

还试试:

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

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效