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

前端之家收集整理的这篇文章主要介绍了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.f2er.com/css/216409.html

猜你在找的CSS相关文章