カーソルを合わせるとチラチラ点滅してCPU使用率が上がるバグに対処する

greasemonkey firefox

firefoxのバグ、思い当たる人はムフフな確率が高いエントリー。
マウスカーソルを合わせるとリンクがへこんだようにみえる効果を狙ったCSSがある。それをfirefoxでみるとバグにより点滅してCPU使用率が上がる部分があるので試してみたメモ。

a:hover {
position: relative;
top: 1px;
left: 1px;
}

top,leftのプロパティを使っているので、問題のチラつきはtop,left部分で起こる。

サンプル

http://cherenkov.hp.infoseek.co.jp/sample/hover/hover.shtml

対処

position:staticにして黙らせる。CSSを追加して値を上書きする作戦。

//サンプル専用、firebugに貼り付けて使える。
function addGlobalStyle(css) {
  var head, style;
  head = document.getElementsByTagName('head')[0];
  if (!head) { return; }
  style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = css;
  head.appendChild(style);
}
addGlobalStyle('a:hover#ex1{position: static;}a:hover#ex2{position: static;}');

GM_addStyle('a:hover{position: static;}');

サイトの構成にあわせて適宜a:hoverの部分を変えて使う。

関連