Chrome瀏覽器mousemove event 的 bug

I found a strange issue that ...

[Chrome browser trigger "mousemove" event when mouse do not move!!]

Date： 2012.08.28 pm 03:33
Version: Chrome 21.0.1180.83 m

as below:

html tag:

<div id="zone" style="height: 100px; width: 100px;">

javascript code:

var Z=document.getElementById("zone");
Z.addEventListener("mousemove",function(){console.log("Hello");},false);

Then put the mouse onto "zone" , "Hello" words present in console per second.

What a XXX Chrome now is.

Chrome 瀏覽器造成 css3 黑屏

chrome 16, css3 ,html5, transition, animation

避免google 瀏覽器執行CSS3屬性時出現黑屏

前一陣子開發web前端服務，大量的使用CSS3的動畫特效，尤其是animation與transition，原本一切都好好的，某天，Chrome瀏覽器自動更新後(版本16之後)，突然畫面上就偶發性的出現黑色區塊，或是邊界殘影，上網搜尋了很久，發現也有不少人遇到這個問題。

經過一番辛苦的爬文後，依然沒有結論，只知道確定是Chrome瀏覽器的問題，因為別家browser的都沒事。Case就這樣擺爛放著一陣子，有一天，同事突然問了一句，他需要回報確定的發生問題，想知道究竟是設定了哪個屬性才造成這種現象，恩...然後...我發現...疑...沒有設定屬性耶，那怎麼效果跑的這麼開心，又經過一翻研究，發現，原來在chrome中，animation與transition沒有特別指定要套用的屬性時，預設是 all，也就是全屬性。

噹噹~! 馬上就著手進行測試，嗯嗯，設定成特定屬性試試看，哇，果然黑色區塊的問題不翼而飛，接下來直接寫上transition全屬性套用呢？ 嘿嘿，問題又出現了！ 賓果，抓到你了！