解決使用 CSS transition 造成圖片模糊/跳動的問題

在做 campaign 案時常會遇到圖片(不論是 <img> 或 css background)使用 transition 做動態時會模糊,最後到定點後會跳動一下的問題,因為一直很惱人所以就忍不住找了解法

selector {
    backface-visibility: hidden;
    transform: translateZ(0) scale(1, 1);
}


加了上面的設定 Chrome 看起來問題就解決了,但不曉得為何 Safari(新生代 IE)感覺好像沒有太大的改善,於是我另外加了 will-change 屬性,Safari 看起來就好多了,以下附上我的設定:

selector {
    backface-visibility: hidden;
    transform: translateZ(0) scale(1, 1);
    will-change: margin-top, opacity       // 這邊的屬性值使用動態時會用到的就好,不建議設定太多
}