Tested background for future search reference:
- Mac Sonoma 14.5
- Safari 17.5
- Firefox 128.0 (64-bit)
- Chrome 126.0.6478.127 (Official Build) (arm64)
** This question differ to the existing questions, it focuses on text-shadow inconsistency in Safari and what solutions to cope with it rather than discussing about text-stroke.
I discover the characteristic of the text-shadow while using text-stroke. That’s why it might be misunderstood to be text-stroke oriented. The other question didn’t mention the text-shadow problem in Safari.
I am doing text styling for a web project. At first, I wanted to add a stroke to the text.
But soon I found out that the text-stroke property actually gives an inner stroke and cannot be turned into an outer stroke. So, I came up with a solution by creating a pseudo-element with the same text to mimic an outer stroke effect. This method comes from my habit of doing layouts in Photoshop or Illustrator. A text shadow is also added to give a sense of depth.
The outcome looks great, but then I found another problem in Safari. Safari on Mac, iPhone, and iPad renders the text-shadow differently.
The problem arises because the text-shadow in Safari considers everything inside the element, including the pseudo-element. So, the shadow looks different. I am not sure if there is any description of the CSS specification implementation in the rendering engine. As far as I have tested with Firefox and Chrome, they look the same.
I am not sure if it is a Safari bug or an implementation philosophy difference. I have done a couple of tests, workarounds, and solutions which I will summarize later as a reference answer.
Here is an illustration to the above.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.text-shadow {
position: relative;
text-shadow: 2px 4px 7px #333333 !important;
font-size: 80px !important;
color: #fbff00 !important;
text-transform: uppercase !important;
}
.text-shadow::before {
content: attr(data-content);
color: black;
-webkit-text-stroke: 0.1em black;
position: absolute;
z-index: -1;
left: 0;
top: 0;
width: 100%;
}
</style>
</head>
<body>
<div class="text-shadow" data-content="Hello! Is it different in Safari?">Hello! Is it different in Safari?</div>
</body>
</html>2