Check out this example of an issue that I'm experiencing https://jsfiddle.net/smdLzsx5/1/
Could someone please investigate and see if they encounter the bug as well? I'd like to know if this problem can be replicated consistently so I can report it to Apple.
Code:
<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>
Under certain conditions (like the code above), the text-shadow may not show up correctly - it could either briefly appear then disappear again.
I am currently using MacOX 10.12.6 (16G29) with Safari 11.0 (12604.1.38.1.7)
This issue does not seem to happen in Firefox 56 or Chrome 61.0.3163.100
Several factors might influence this problem, such as:
- Modifying the width of the header01 div (changing it to 200px stops the text-shadow from displaying)
- Setting the header01 div to overflow:visible; (the shadow displays correctly)
- Altering the heading01 font size to 20pt (this also solves the issue)