Как справиться с непоследовательным рендерингом свойства text-shadow в Safari? ⇐ CSS

[Anonymous]

Проверенная основа для будущего поиска:

• Mac Sonoma 14.5
• Safari 17.5
• Firefox 128.0 (64-разрядная версия)
• Chrome 126.0.6478.127 (официальная сборка) (arm64)

Я занимаюсь оформлением текста для веб-проекта. Сначала я хотел добавить к тексту обводку.
Но вскоре я обнаружил, что свойство text-stroke на самом деле дает внутреннюю обводку и не может быть превращено в внешний ход. Итак, я придумал решение, создав псевдоэлемент с тем же текстом, чтобы имитировать эффект внешнего штриха. Этот метод основан на моей привычке делать макеты в Photoshop или Illustrator. Также добавляется тень текста, чтобы придать ощущение глубины.
Результат выглядит великолепно, но затем я обнаружил еще одну проблему в Safari. Safari на Mac, iPhone и iPad отображает тень текста по-разному.
Проблема возникает потому, что тень текста в Safari учитывает все внутри элемента, включая псевдоэлемент. Итак, тень выглядит по-другому. Я не уверен, есть ли какое-либо описание реализации спецификации CSS в механизме рендеринга. Насколько я тестировал с Firefox и Chrome, они выглядят одинаково.
Я не уверен, является ли это ошибкой Safari или различием в философии реализации. Я провел несколько тестов, обходных путей и решений, которые позже обобщу в качестве справочного ответа.
Вот иллюстрация к вышеизложенному.

Код: Выделить всё

Document

.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%;
}



Hello! Is it different in Safari?

Подробнее здесь: https://stackoverflow.com/questions/787 ... -in-safari