如何在不破壞容器邊界半徑的情況下創建與 Safari 兼容的過渡變換比例 (How would I create a Safari-compatible Transition Transform Scale without breaking the container's border-radius)

問題描述

如何在不破壞容器邊界半徑的情況下創建與 Safari 兼容的過渡變換比例 (How would I create a Safari‑compatible Transition Transform Scale without breaking the container's border‑radius)

我有一張想在懸停時縮放的圖片。圖像的容器有一個邊界半徑。圖像在大多數瀏覽器上都可以很好地縮放，但在 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;
}

但這並沒有什麼不同，我該怎麼做在此過渡期間保留邊界半徑？

參考解法

方法 1:

Although this breaks using transform: scale and ‑webkit‑transition: transform 1s, border‑radius 1s or ‑webkit‑transition: all 1s a potential workaround since this is using backround images is to change the background size on hover instead of scaling it up,

.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%;

}

</code></pre>
Working demo, https://jsfiddle.net/khzu0t61/
(by Lyres、Lyres)
參考文件


How would I create a Safari‑compatible Transition Transform Scale without breaking the container's border‑radius (CC BY‑SA 2.5/3.0/4.0)