質問: ### 発生している問題 WordPressテーマ『アルバトロス』でimg要素にデフォルトで指定されているhoverアニメーションの挙動が変です。 GoogleChromeでデモページの投稿一覧のアイキャッチ画像にhoverした際に確認いただけると思います。 本来`opacity`で若干画像が薄くなるだけの処理のようですが、**左右もしくは上下に画像が一瞬ズレて元に戻るような挙動が起こります。** 当然ながらCSSにはhover時に位置を動かすような記述はありません。 さらに、ウィンドウサイズによって問題が発生するorしないこともあるようです。 * 横640px→発生しない * 横320px→発生する この辺は環境依存かもしれませんので横幅を変えて試していただければ。 `transition`もしくは`opacity`プロパティを無効化すれば問題が発生しなくなることは分かりました。ですがとても気持ちが悪いので、**このような問題が発生する原因・(あれば)対策方法が知りたいです。**何かご存知の方教えてください。 ### 該当のソースコード 関係してそうなCSSだけ抜き出しました ``` a, a img { -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } a:hover img { filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; opacity: 0.7; } img { border: 0; vertical-align: bottom; max-width: 100%; height: auto; } ``` * 確認した環境 windows10 GoogleChrome 66.0.3359.181 FireFox, MicrosoftEdgeでは確認できませんでした
回答: 下記の記事を参考に調整してみてください。 * 【CSS】transitionプロパティ使用時に、Chromeブラウザで1pxずれる現象を回避する