css - 如何在不破坏容器边界半径的情况下创建与 Safari 兼容的过渡变换比例

Question

我有一张想在悬停时缩放的图像。图像的容器有一个边界半径。图像在大多数浏览器上都可以很好地缩放，但在 Safari 上，容器的边框半径在应用过渡时会被删除。我创建了一个 jsfiddle 来演示这种行为。

https://jsfiddle.net/jt9u7qhw/

我尝试在有和没有 webkit 的情况下应用特定属性 transform 和 border-radius 的转换时间，

.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/