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


留言

這個網誌中的熱門文章

[Android] 筆記 手機上測試自己的 APP

解決fatal: Not a git repository (or any of the parent directories): .git錯誤

[Android 筆記] 設定 ImageView 的圖檔來源