【CSS】transitionプロパティ使用時に、Chromeブラウザで1pxずれる現象を回避する

HTML&CSS

2014.02.03

先週インフルエンザに感染して、ダウンしてました ishida です。
今年のインフルエンザは感染力がかなり強いようで、
次女→自分→長女→嫁（いまココ）と感染してしまいインフル一家となってしまいました。。。
助けてぇ〜。
急な高熱・のどの痛み・関節痛などの症状がでたら、すぐ病院に行きましょうね。

さて今回は、先日コーディング中に遭遇したChromeブラウザのみにおきた現象を回避するための Tips を紹介します。

最近のHTMLコーディングでは、ボタンなどのマウスオーバーエフェクトを CSS で対応することが多いです。よく使うのは、以下のようなものです。

ソースコード

HTML

<p class="button"><a href="#"><img src="hogehoge.png" alt="ボタン" width="300" height="80"></a></p>

CSS

.button {
    text-align: center;
}

.button a {
    -webkit-transition: 0.2s ease-in;
    transition: 0.2s ease-in;
    filter: alpha(opacity=100);
    opacity: 1;
}

.button a:hover,
.button a:active {
    filter: alpha(opacity=60);
    opacity: 0.60;
}

opacityプロパティとtransitionプロパティを使って、エフェクトをつけています。

特に目新しいことはしてないのですが Chrome ブラウザでマウスオーバーしたときに問題が。

Chromeでマウスオーバー時に、要素が右に1px 動く

IE、Firefoxでは問題なく動作するのですが、Chromeだけマウスオーバー時に要素が右に1px 動く現象が発生しました。ちなみに、Chromeのバージョンは Windows版の27.0.1453.116です。

transitionプロパティの記述を削除してみると、1pxのズレはなくなりました。
不具合の原因になっているのは、transitionプロパティにあるようですが。。。

解決方法は、2つあった

いろいろと試してみたところ、解決方法は2つありました。

その1. display: inline-block; を使う

a要素に display: inline-block; の記述を追加したら、マウスオーバー時にズレが発生しなくなりました。

.button a {
    display: inline-block; /* 追加 */
    -webkit-transition: 0.2s ease-in;
    transition: 0.2s ease-in;
    filter: alpha(opacity=100);
    opacity: 1;
}

a要素の中に画像1つの場合は上記の対応で問題ないのですが、a要素の中に画像＆テキストなど複数の要素がある場合には、まだズレが発生してしまいます。

その2. backface-visibility: hidden; を使う

a要素に backface-visibility: hidden; の記述を追加したら、マウスオーバー時にズレが発生しなくなりました。

.button a {
    -webkit-backface-visibility: hidden; /* 追加 */
    backface-visibility: hidden; /* 追加 */
    -webkit-transition: 0.2s ease-in;
    transition: 0.2s ease-in;
    filter: alpha(opacity=100);
    opacity: 1;
}

この記述の場合には、aタグ内に要素が1つでも複数でも問題なく動作するので、こちらがオススメです。