CSS Transform 在 hover 時有殘影

最近在寫一些 css 的效果，主要是利用 css3 的 transform 跟 animation，在一個 div hover 時，有些小特效，像是往上移動，或是某些小元件放大，主要是有用到 scale，不過發現在 hover 時，有時候會殘影，在網路上找到兩個解法，一個是在某 div 加上 image-rendering 屬性，另一個是 backface-visibility，實測之後，image-rendering 非常有用，幾乎是9成機率未再見到 hover 時的殘影，給大家參考 :)

image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;


-webkit-backface-visibility: hidden;
backface-visibility: hidden;


參考文章:
＊Image-rendering 參考文章 : https://css-tricks.com/almanac/properties/i/image-rendering/。文章有提到 :『The image-rendering property defines how the browser should render an image if it is scaled up or down from its original dimensions. 』。

* http://stackoverflow.com/questions/15464055/css-transition-effect-makes-image-blurry-moves-image-1px-in-chrome

BTW 我對 animation 沒有很熟，剛好有機會練到而已 Orz...