【CSS】transition使用時にchromeで右にずれる件

最近cssで出来る事も増えて来てボタンのマウスオーバーのエフェクト等はcssで対応する事が増えてきました。

例えば下記みたいなコード

HTML

<a class="button">
	<div class="txt">
		<p>なんか被せるテキスト</p>
	</div>
	<img src="【画像のパス】" alt="">
</a>

CSS

a{
	margin: 0 auto;
	max-width: 240px;
	display: block;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
a .txt{
	position: absolute;
	top: 50%;
	left: 50%;
	color: #fff;
	transform: translate(-50%, -50%);
	z-index: 10;
}
	
a img{
	width: 100%;
	height: 200px;
	object-fit: cover;
	transition: 0.6s;
}

a:hover img{
	transform: scale(1.2,1.2);
	opacity: 0.7;
}

大きさ等は適当ですが要は画像の上にテキストが乗っていてマウスオーバーで画像が拡大+透過されるというエフェクトです。(テキストはそのまま)

これで大体動作させて後は微調整と言った流れになるのですがここでchromeでマウスオーバーした時に非常に微妙ながら問題が発生しました。

Chromeでマウスオーバー すると1px程度右にずれている

IE、Edge、Firefox等では問題無かったのですがchromeだとよ～く見ないと見逃してしまいそうですがマウスオーバーした時に右に1px程度ちょこっとずれているのです!

解決策

解決策としてはtransitionさせている要素に「backface-visibility: hidden;」を追加する事でした。

a img{
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: 0.6s;
    backface-visibility: hidden;
}

ちなみに調べたところ「 display: inline-block;  」でも対応出来るみたいですが中に要素が複数ある場合の配置に困ってしまうので汎用性としては 「backface-visibility: hidden;」 の方が良いようです。

しかし、 backface-visibilityなプロパティ今まで使ってこなかったなぁ・・・・

と、いう事で調べてみると

backface-visibility

CSS 3D Transformsによる3次元の描画で要素がユーザーに対して裏側を向いたときに、その裏面を可視にするかどうかを設定するプロパティだそうです。

まとめ

そんな物があったのですね。

今まであまり遭遇しなかったchromeでのバグでしたが新しいプロパティを1つ学習しました。

似たような事例の参考になれば良いと思います。