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

先週インフルエンザに感染して、ダウンしてました ishida です。 今年のインフルエンザは感染力がかなり強いようで、 次女→自分→長女→嫁（いまココ）と感染してしまいインフル一家となってしまいました。。。 助けてぇ〜。 急な高熱・のどの痛み・関節痛などの症状がでたら、すぐ病院に行きましょうね。 さて今回は、先日コーディング中に遭遇したChromeブラウザのみにおきた現象を回避するための Tips を紹介します。 最近のHTMLコーディングでは、ボタンなどのマウスオーバーエフェクトを CSS で対応することが多いです。よく使うのは、以下のようなものです。 ソースコード HTML <p class="button"><a href="#"><img src="hogehoge.png" alt="ボタン" width="300" height="80"></a></p> .button {

[Falky]

backface-visibility: hidden; 知らなかった！確かにこれで直る。今までChromeの描画のクセってことで許容していたよ、、、

[mizyu5100]

“-webkit-backface-visibility: hidden; /* 追加 */ backface-visibility: hidden; /* 追加 */”

[mizuno1001]

css3

[k_gobo]

49.0.2623.110でまだ直ってなかった。遭遇＆解決したので本当にありがたい。

[hedeyoshi]

backface-visibilityってのを恥ずかしながら初めて知りました。なるほどね～。