Як зробити плавну зміну фонових зображень у Сафарі?

Хтось, можливо вже виявив давно, що у Сафарі при плавній зміні за ховером одного фонового зображення на інше, виявляються неприємні артефакти у вигляді якихось трансформацій та рухів.

Простіше кажучи, при зміні фонових зображень, вони скачуть та змінюються у розмірах. Причому в Хромі, на інших вебкитах відбувається все дуже плавно і гладко. Різні ігри 

background-position

і 

background-size

результатів не принесли. Проблема вирішується лише відключенням 

transition

але за умов завдання, зміна зображень повинна відбуватися плавно.

Це завдання можна легко вирішити за допомогою псевдокласів, просто встановивши перше зображення в 

:before 

друге в 

:after

 абсолютно спозиціонувати і по ховеру просто змінювати їх прозорість.

See the Pen Untitled by Ivan (@DanilinBiz) on CodePen.

Посилання на codepen.io: https://codepen.io/DanilinBiz/pen/qBymJmm

Якщо також використовуєте зміну фону, перевірте, як вона виглядає у Сафарі. Успіхів!