Chromeでのみimg要素hover時の挙動がおかしくなる原因を教えてください。

発生している問題

WordPressテーマ『アルバトロス』でimg要素にデフォルトで指定されているhoverアニメーションの挙動が変です。
GoogleChromeでデモページの投稿一覧のアイキャッチ画像にhoverした際に確認いただけると思います。

本来opacityで若干画像が薄くなるだけの処理のようですが、左右もしくは上下に画像が一瞬ズレて元に戻るような挙動が起こります。
当然ながらCSSにはhover時に位置を動かすような記述はありません。

さらに、ウィンドウサイズによって問題が発生するorしないこともあるようです。

横640px→発生しない
横320px→発生する

この辺は環境依存かもしれませんので横幅を変えて試していただければ。

transitionもしくはopacityプロパティを無効化すれば問題が発生しなくなることは分かりました。ですがとても気持ちが悪いので、**このような問題が発生する原因・(あれば)対策方法が知りたいです。**何かご存知の方教えてください。

該当のソースコード

関係してそうなCSSだけ抜き出しました

CSS
1a, a img {
2    -webkit-transition: 0.3s ease-in-out;
3    -moz-transition: 0.3s ease-in-out;
4    -o-transition: 0.3s ease-in-out;
5    transition: 0.3s ease-in-out;
6}
7a:hover img {
8    filter: alpha(opacity=70);
9    -ms-filter: "alpha(opacity=70)";
10    opacity: 0.7;
11}
12img {
13    border: 0;
14    vertical-align: bottom;
15    max-width: 100%;
16    height: auto;
17}

確認した環境

windows10
GoogleChrome 66.0.3359.181

FireFox, MicrosoftEdgeでは確認できませんでした

行動規範の内容に同意します

回答1件

ベストアンサー

下記の記事を参考に調整してみてください。

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

投稿2018/05/17 09:07

m.ts10806

総合スコア80850

退会済みユーザー

2018/05/17 15:05

ありがとうございます。ググる力鍛えます。解決策1は"複数の要素がある場合"に当てはまるのでダメでしたが、解決策2でも変化なしですねー。 translate3d辺りが怪しいってことですかね？無効化する手段とかないものでしょうか？

kei344

2018/05/17 15:23

To: aozukiさんデベロッパーツールにて下記記述を追加したところ動く挙動はなくなりましたよ。 <style> a img { -webkit-backface-visibility: hidden; /* 追加 */ backface-visibility: hidden; /* 追加 */ } </style>

退会済みユーザー

2018/05/18 01:02

あ、img要素にも適用させなきゃなんですね。ありがとうございました。