【发布时间】:2017-10-09 20:51:20
【问题描述】:
这里是问题的一个例子https://jsfiddle.net/smdLzsx5/1/
有人可以看看他们是否发生了错误吗?我很想知道问题是否可以持续重现,以便我可以将其报告给苹果。
代码:
<html>
<head>
<style>
.header01{
background-color:#d0d0d0;
overflow:hidden;
border-radius:5px;
width:500px;
}
.heading01{
color:#ffffff;
text-shadow:0px 2px 4px #000000;
font-size:40pt;
}
</style>
</head>
<body>
<div class="header01" id="header">
<div class="heading01">
BAD<span>GOOD</span>
</div>
</div>
</body>
</html>
在某些情况下(例如上面的代码),文本阴影不会呈现 - 或者它短暂出现然后再次消失。
我正在使用 MacOX 10.12.6 (16G29)、Safari 11.0 (12604.1.38.1.7)
在 Firefox 56 或 Chrome 61.0.3163.100 上不会出现问题
很多事情都会影响这个问题,例如:
- 更改 header01 div 的宽度(将其更改为 200px 并且没有 文本阴影渲染)
- 将 header01 div 设置为溢出:可见; (阴影渲染正确)
- 将 heading01 字体大小更改为 20pt(阴影渲染正确)
【问题讨论】:
-
在我的 Safari 上看起来不错