CSS анимация включена: элемент не всегда работает (сафари)

Question

У меня есть CSS анимация для элемента: before, и она работает в FireFox и Chrome, но не в Safari (время от времени она работает после многократной очистки кэша или редактирования большого количества файлов). Я проверил эту ссылку на CanIUse, и, похоже, она поддерживается в Safari. Может быть, я что-то упускаю. Вот что у меня есть:

CSS:

.highlight {
    position: relative;
    display: inline-block;
    padding: 0 0.3em;
}
.highlight .highlight-inner {
    color: black!important;
    line-height: 1.85;
    position: relative;
}

@-webkit-keyframes slideFadeIn {
    0% {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes slideFadeIn {
    0% {
        width: 0;
    }
    to {
        width: 100%;
    }
}

.highlight:before {
    content: "";
    position: absolute;
    top: 0.2em;
    bottom: 0.2em;
    left: 0;
    right: 0;
    background-color: #9085da;

    width: 0;
    animation: slideFadeIn 1.5s cubic-bezier(.22, 1, .32, 1) 0.6s;
    transform-origin: left;
    animation-fill-mode: both;
}

HTML:

<span class="highlight">
    <span class="highlight-inner">Designing</span>
</span>

Чтобы увидеть нужный эффект, просмотрите эту страницу в FireFox или Chrome (это не реклама): https://www.lavandacode.com/

Заранее спасибо!