カテゴリー
log

Chromeで画像のalpha変更時に画像がピクる問題

なんか説明し辛いし、レアケースだとおもうのだけど、

  • Chromeで
  • display:table;/display:table-cell;とかつかってる
  • CSS3のtransition + opacity でリンク画像にhoverエフェクトつける
  • 画像はmax-widthとかつかってリサイズさせてる

という条件で、hover時に一瞬画像がピクッと動く症状がでた。
(起こる画像とおこらない画像がある)


自分の場合は、その要素に、

“`
-webkit-backface-visibility: hidden;
“`

指定したらなおた。

2014-01-21(火) update

上記だと、なおってないとこあった。

css – image moves on hover – chrome opacity issue – Stack Overflow

を参考に

a {
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  transform: rotate(0);
}

a img {
  -webkit-backface-visibility: hidden;
}

でなおるす。※max-widthなどで画像リサイズしてるとちょい荒れるけど。