На сафари ужасно отображается градиент как исправить?

Здравствуйте!
Ситуация такая, на всех мобильных устройствах нормально отображается заголовок, а на сафари айфона вот так вот

Safari скрин

Проблема явно с градиентом.
Вот код

<h2 class="section_title">Система <span class="gradient-text">контроля и управления доступом</span>, система <span class="gradient-text">охранной сигнализации</span></h2>

HTML

<h2 class="section_title">Система <span class="gradient-text">контроля и управления доступом</span>, система <span class="gradient-text">охранной сигнализации</span></h2>

и CSS

.gradient-text {
background: -o-linear-gradient(90deg, #00D4FF 1.08%, #94FC2D 105.26%);
background: -moz-linear-gradient(90deg, #00D4FF 1.08%, #94FC2D 105.26%);
background: -webkit-gradient(90deg, #00D4FF 1.08%, #94FC2D 105.26%);
background: -webkit-linear-gradient(90deg, #00D4FF 1.08%, #94FC2D 105.26%);
background: linear-gradient(90deg, #00D4FF 1.08%, #94FC2D 105.26%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: Roboto;
font-style: normal;
font-weight: 900;
font-size: 28px;
line-height: 42px; }
@media screen and (min-width: 768px) {
.gradient-text {
font-size: 36px; } }

Код

.gradient-text {

    background: -o-linear-gradient(90deg, #00D4FF 1.08%, #94FC2D 105.26%);

    background: -moz-linear-gradient(90deg, #00D4FF 1.08%, #94FC2D 105.26%);

    background: -webkit-gradient(90deg, #00D4FF 1.08%, #94FC2D 105.26%);

    background: -webkit-linear-gradient(90deg, #00D4FF 1.08%, #94FC2D 105.26%);

    background: linear-gradient(90deg, #00D4FF 1.08%, #94FC2D 105.26%);

    background-clip: text;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;   

    font-family: Roboto;

    font-style: normal;

    font-weight: 900;

    font-size: 28px;

    line-height: 42px; }

    @media screen and (min-width: 768px) {

        .gradient-text {

            font-size: 36px; } }