Как мне создать совместимый с Safari Transition Transform Scale без нарушения границы радиуса контейнера

Question

У меня есть изображение, которое я хотел бы масштабировать при наведении курсора. Контейнер изображения имеет радиус границы. Изображение отлично масштабируется в большинстве браузеров, но в Safari border-radius контейнера удаляется при применении перехода. Я создал jsfiddle, демонстрирующий это поведение.

https://jsfiddle.net/jt9u7qhw/

Я попытался применить время перехода для конкретных свойств transform и border-radius с и без webkit,

.element {
    transition: transform 1s, border-radius 1s;
    -webkit-transition: transform 1s, border-radius 1s;
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
}

Но это не имело значения, как мне сохранить радиус границы во время этого перехода?

Answer 1

Хотя это нарушает использование transform: scale а также -webkit-transition: transform 1s, border-radius 1s или -webkit-transition: all 1s Потенциальный обходной путь, поскольку здесь используются фоновые изображения, состоит в том, чтобы изменить размер фона при наведении курсора вместо его увеличения,

.element {
    background-size: auto 100%; # set width to auto works in this case b/c landscape pic
    -webkit-transition: all 1s ease-out;
    transition: all 1s ease-out;
}

.container:hover .element,
.container:focus .element {
    background-size: auto 110%;
}

Рабочая демонстрация, https://jsfiddle.net/khzu0t61/