Chromeでhover時にtransformがあるとoverflow: hiddenのある画像が震える

Question

問題のページ
https://sirinova.com/nova-button.html

Chromeでボタンにカーソルを合わせるとボタンのhoverに設定されたtransformに反応してoverflow: hiddenのある画像がにじんだり縦に1px震えます。transformかoverflow: hiddenのどちらかを無くすとにじんだり震えなくなります。両方設定したままにじんだり震えなくする方法がありましたら教えてください。

transitionプロパティ使用時に、Chromeブラウザで1pxずれる現象を回避する | バシャログ。
こちらでは解決できませんでした。

参考画像

1.ボタンのホバーコード

.btn01 a:hover {
    transform: translateY(3px);
}

<div class="btn01">
<a href="./" data-lb-orig-href="https://sirinova.com/"><i class="fas fa-chevron-circle-right"></i>ボタンリンク</a>
</div>

2.画像のコード（アスペクト比を維持するためはみ出した部分を非表示にするためoverflow: hidden;を指定しています）

.linkcard .thumb {
    position: relative;
    overflow: hidden;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 120px;
    padding-top: 67.5px;
}
.linkcard .thumb img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-height: none;
    width: 120px;
}

<div class="linkcard">
<a href="./nova-font-awesome.html" data-lb-orig-href="https://sirinova.com/nova-font-awesome.html">
<span class="thumb">
<img src="./img/nova-font-awesome.png" alt=""></span><span>アイコンフォント（FontAwesome）の使い方<span class="linksite">SIRINOVA</span>
</span>
</a>
</div>

3.新着記事の画像のコード（アスペクト比を維持するためはみ出した部分を非表示にするためoverflow: hidden;を指定しています）

#newpost li .thumb {
    position: relative;
    overflow: hidden;
    float: left;
    text-align: center;
    width: 100px;
    padding-top: 56.25px;
    margin-right: 5px;
}
#newpost li .thumb img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-height: none;
}

<li>
<a href="./nova-get-content.html" data-lb-orig-href="https://sirinova.com/nova-get-content.html">
<figure class="thumb"><img src="./img/nova-get-content.png" alt=""></figure>
<p>コンテンツ自動取得のデザイン<time>2018.03.03</time></p>
</a>
</li>

追記

新着記事の方の画像はpadding-top:から小数点を削除したら縦に1px移動する問題は解消されました。にじむ問題は残ったままです。

#newpost li .thumb {
    position: relative;
    overflow: hidden;
    float: left;
    text-align: center;
    width: 100px;
    padding-top: 56px;
    margin-right: 5px;
}

Comments

[defghi1977]

問題を引き起こしている部分のHTMLを追加提示して下さい.（リンクの提示だけではリンク切れの際に困ります）

[defghi1977]

私の環境でも再現しました. Chromeの不具合である可能性が高いため, 問題を報告しておきました.

[退会済みユーザー]

文字も1px動くから仕様かと

[snof]

報告ありがとうございます。うーん、仕様だと困りましたね。一部解決できたので追記しました。

[defghi1977]

一応解決策が見つかったのであれば（自己）回答として下さい(解決とする必要はありません). transformプロパティをtransitionでアニメーション化するだけで本来リフローとかは発生しないはずなのに, 全く関係のないノードのペイント状況に影響を及ぼしている(様に見える)ため, 個人的にはレンダリングエンジン実装上の不具合に見えます. とは言え, 余計なスタイルがてんこ盛りなことに起因するレアケースとも思います.

[snof]

追記を修正しました。

Answer 1

おそらくa要素のレンダリングモードがtransformプロパティのtransitionにプロパティよるアニメーション化により切り替わっていること(transformプロパティをアニメーション化するとハードウェアアクセラレーションが有効となる)に起因しています.
その結果最終的なスクリーンへのグラフィック合成処理に何らかの影響を及ぼしているのでしょう.

この問題は（対症療法的ですが）will-change:contentsを指定し, WEBブラウザ側に「アニメーションの準備」を意識させる(a要素のレンダリングに際しアクセラレーションを常に有効化する)ことで解決しました.

/*styles.cssより抜粋*/
.btn01 a, .btn02 a, .btn03 a, .btn04 a, .btn05 a, .btn06 a, .btn07 a {
display: inline-block;
font-size: 1.6rem;
font-weight: bold;
line-height: 1.5;
text-align: center;
max-width: 90%;
padding: .8em 1.6em;
transition: .3s ease-in-out;/*ここにアニメーションの設定がある*/
color: #fff;
background-color: #5bbff7;
will-change: contents;/*ここに追加*/
}

.btn01 a:hover {
transform: translateY(3px);/*ここをアニメーション化するとハードウェアアクセラレーションが有効となる*/
}

NOTE:
なお, will-changeプロパティを多用するとシステムに負荷が掛かるため, 理想としては問題の根本を取り除くべきでしょう.

参考
https://developer.mozilla.org/ja/docs/Web/CSS/will-change

Answer 2

色々なところで解決してますね。

https://www.futaego.com/2017/css3-transition-transform-%E7%94%BB%E5%83%8F%E3%81%8C%E3%81%BC%E3%82%84%E3%81%91%E3%82%8B/

Comments

[snof]

a img {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
ありがとうございます。これをすると改善できたのですが今度はトップページのカード型のサムネイルがホバーすると縦に１px動くようになってしまいました。どうやら一定以上のサイズと.thumbの高さ（padding-top）に小数点があると起きるようです。これを解説する方法はありますでしょうか？
https://sirinova.com/

またこの質問は新たにトピックスを作ったほうがよいのでしょうか？

Answer 3

新着記事の方の画像はpadding-top:から小数点を削除したら縦に1px移動する問題は解消されました。にじむ問題は残ったままです。

#newpost li .thumb {
    position: relative;
    overflow: hidden;
    float: left;
    text-align: center;
    width: 100px;
    padding-top: 56px;
    margin-right: 5px;
}