Question

的示例

有人可以看看，看看是否发生了这些错误？我有兴趣知道问题是否可以一致地重现，所以我可以向苹果报告。

代码：

<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，而不是 text-shadow渲染）
将header01 div设置为overflow：visible; （阴影渲染正确）
将heading01字体大小更改为20pt（阴影渲染正确）

Answer 1

尝试删除＆＃39; overflow：hidden;＆＃39;来自您的＆＃39; .header01＆＃39;类。看起来这是造成它的。

MacOS Safari文本阴影丢失

1 个答案: