Масштабирование градиента значка оставляет контур ⇐ CSS

[Anonymous]

Изменить: Это проблема только в Safari. В Chrome этого нет.
Я пытался добавить градиент к значку, когда пользователь наводит на него курсор, как показано ниже. Однако при масштабировании вокруг остается небольшой, но заметный контур. Как это исправить?

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

.links i {
vertical-align: middle;
color: white;
font-size: 36px;
margin: 0 5px;
}

.icon-link:hover i {
background: linear-gradient(rgb(74, 151, 232), rgb(57, 57, 217));
background-clip: text;
color: transparent;
transform: scale(1.1);
transition: transform 0.2s ease;
}

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

[url=https://example.com]
[i]email[/i]
[/url]

[url=https://example.com]
[i][/i]
[/url]

[url=https://example.com]
[i][/i]
[/url]

[img]https://i .sstatic.net/w5MbkFY8.png[/img]


Подробнее здесь: https://stackoverflow.com/questions/792 ... an-outline