ホバーすると、CSSトランジションエフェクトがdivを移動するCSSがいくつかあります。
問題は、例でわかるように、translateトランジションには、div内の画像を1px上下に移動させる（そしておそらく少しだけサイズを変更する）という恐ろしい副作用があり、その結果、画像がずれて表示されることです。焦点が合っていない...
グリッチはホバー効果が適用されている間ずっと適用されているようであり、試行錯誤の過程から、変換遷移がdivを移動したときにのみ発生するように思われると安全に言えます（ボックスシャドウと不透明度も適用されますが、削除するとエラーが発生します）。
この問題は、ページにスクロールバーがある場合にのみ発生するようです。したがって、divのインスタンスが1つしかない例でも問題ありませんが、同じdivがもう一度追加されたため、ページにスクロールバーが必要になると、問題が再び発生します...
image-renderingぼやけた画像に問題がある場合は、以下の回答、特にCSSプロパティも確認してください。<img>を使用して背景画像をタグに置き換えることができます。CSSでこれを試してください：
.your-class-name {
/* ... */
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1, 1);
}
これが行うことは、部門が「より2D」で動作するようにすることです。
backface-visibilityになりました。現在、これが他のブラウザのレンダリング（FF、IE）にどのように影響するかはわかりません。したがって、プレフィックスなしのバージョンは注意して使用してください。transform-webkit-要素に3D変換を適用する必要があるため、要素は独自の複合レイヤーを取得します。例えば：
.element{
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
また
.element{
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
レイヤー作成基準の詳細については、こちらをご覧ください：Chromeでの高速レンダリング
説明：
例（緑色のボックスにカーソルを合わせる）：
要素でトランジションを使用すると、ブラウザはスタイルを再計算し、トランジションプロパティが視覚的（私の例では不透明）であってもコンテンツを再レイアウトし、最後に要素をペイントします。
ここでの問題は、遷移が発生している間、ページ上の要素を「踊る」または「点滅させる」効果をもたらす可能性のあるコンテンツの再レイアウトです。設定に移動し、[複合レイヤーを表示する]チェックボックスをオンにしてから、要素に3D変換を適用すると、オレンジ色の境界線で囲まれた独自のレイヤーが取得されることがわかります。
要素が独自のレイヤーを取得した後、ブラウザーは、再レイアウトやペイント操作を行わずに、移行時にレイヤーを合成するだけでよいため、問題を解決する必要があります。
埋め込まれたyoutubeiframeでも同じ問題がありました（翻訳はiframe要素の中央揃えに使用されました）。上記の解決策はいずれも、 CSSフィルターのリセットを試みて魔法が発生するまで機能しませんでした。
構造：
<div class="translate">
<iframe/>
</div>
スタイル[前]
.translate {
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
スタイル[後]
.translate {
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
filter: blur(0);
-webkit-filter: blur(0);
}
最新のブラウザでテストした実験的な新しい属性CSSをお勧めしますが、それは良いことです。
image-rendering: optimizeSpeed; /* */
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
image-rendering: optimize-contrast; /* CSS3 Proposed */
-ms-interpolation-mode: nearest-neighbor; /* IE8+ */
これにより、ブラウザはレンダリングのアルゴリズムを認識します
変換時に要素がぼやける別の理由を見つけました。transform: translate3d(-5.5px, -18px, 0);ロードされた要素を再配置するために使用していましたが、その要素がぼやけてしまいました。
上記のすべての提案を試しましたが、変換値の1つに10進値を使用したことが原因であることが判明しました。整数はぼやけを引き起こしません、そして私が整数から離れるほどぼやけは悪化しました。
つまり5.5px、要素のぼかしが最も多く、最も5.1px少なくなります。
誰かに役立つ場合に備えて、ここでこれをチャックすると思っただけです。
スムーズではなく、段階的に移行を使用して問題をだましました
transition-timing-function: steps(10, end);
それは解決ではなく、不正行為であり、どこにでも適用することはできません。
説明はできませんが、うまくいきます。他の答えはどれも私を助けません（OSX、Chrome 63、Non-Retinaディスプレイ）。
2倍にスケーリングし、半分に下げることzoomは私のために働いた。
transform: scale(2);
zoom: 0.5;
試すfilter: blur(0);
それは私のために働いた
私は約10のおそらく解決策を試しました。それらを混ぜても、それでも正しく機能しませんでした。最後に常に1pxの揺れがありました。
フィルタの遷移時間を短縮することで解決策を見つけます。
これは機能しませんでした：
.elem {
filter: blur(0);
transition: filter 1.2s ease;
}
.elem:hover {
filter: blur(7px);
}
解決：
.elem {
filter: blur(0);
transition: filter .7s ease;
}
.elem:hover {
filter: blur(7px);
}
これをフィドルで試してください：
.blur {
border: none;
outline: none;
width: 100px; height: 100px;
background: #f0f;
margin: 30px;
-webkit-filter: blur(10px);
transition: all .7s ease-out;
/* transition: all .2s ease-out; */
}
.blur:hover {
-webkit-filter: blur(0);
}
.blur2 {
border: none;
outline: none;
width: 100px; height: 100px;
background: tomato;
margin: 30px;
-webkit-filter: blur(10px);
transition: all .2s ease-out;
}
.blur2:hover {
-webkit-filter: blur(0);
}<div class="blur"></div>
<div class="blur2"></div>これが誰かに役立つことを願っています。
私にとって、今は2018年です。私の問題（ホバー時に画像を通る白いグリッチフリッカーライン）を修正した唯一のことは、これを持っている画像要素を保持している私のリンク要素に適用することでしたtransform: scale(1.05)
a {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
transform: translateZ(0) scale(1.0, 1.0);
-webkit-filter: blur(0);
filter: blur(0);
}
a > .imageElement {
transition: transform 3s ease-in-out;
}
これはどれもうまくいきませんでした。私にとってうまくいったのは画像を縮小することです。
したがって、画像のサイズや画像の解像度に応じて、次のようなことができます。
.ok {
transform: perspective(100px) rotateY(0deg) scale(0.5);
transition: transform 1s;
object-fit:contain;
}
.ok:hover{
transform: perspective(100px) rotateY(-10deg) scale(0.5);
}
/* Demo Preview Stuff */
.bad {
max-width: 320px;
object-fit:contain;
transform: perspective(100px) rotateY(0deg);
transition: transform 1s;
}
.bad:hover{
transform: perspective(100px) rotateY(-10deg);
}
div {
text-align: center;
position: relative;
display: flex;
}
h3{
position: absolute;
bottom: 30px;
left: 0;
right: 0;
}
.b {
display: flex;
}<center>
<h2>Hover on images</h2>
<div class="b">
<div>
<img class="ok" src='https://www.howtogeek.com/wp-content/uploads/2018/10/preview-11.png'>
<h3>Sharp</h3>
</div>
<div>
<img class="bad" src='https://www.howtogeek.com/wp-content/uploads/2018/10/preview-11.png'>
<h3>Blurry</h3>
</div>
</div>
</center>画像を縮小する必要があります。大きな画像の解像度があることを確認してください
ぼやけたテキストでも同様の問題が発生しましたが、影響を受けたのは後続のdivのみでした。どういうわけか、私が変換を行っていた次のdivがぼやけていました。
このスレッドで推奨されていることをすべて試しましたが、何も機能しませんでした。私にとって、私のdivを再配置することはうまくいきました。次のdivをぼかすdivを親divの最後に移動しました。
誰かが理由を知っているなら、私に知らせてください。
#before
<header class="container">
<div class="transformed div">
<span class="transform wrapper">
<span class="transformed"></span>
<span class="transformed"></span>
</span>
</div>
<div class="affected div">
</div>
</header>
#after
<header class="container">
<div class="affected div">
</div>
<div class="transformed div">
<span class="transform wrapper">
<span class="transformed"></span>
<span class="transformed"></span>
</span>
</div>
</header>
filter: blur(0)
transition: filter .3s ease-out
transition-timing-function: steps(3, end) // add this string with steps equal duration
.3s遷移時間の値を遷移タイミングステップに等しく設定することで助けられました.3s
キーフレームアニメーションで「変換」をアニメーション化すると、Chromeのみ（WindowsおよびMac）でぼやけが発生しました。私にとって、-webkit-optimize-contrast設定は部分的にしか役に立ちませんでした。最良の結果を得るには、scaleXに「魔法の値」を使用する必要もありました（1ではなく1より少し大きい）。
動作したコードは次のとおりです。
img {
image-rendering: -webkit-optimize-contrast;
}
@keyframes scale-in-left {
0% {
transform: scaleX(0);
opacity: 0;
}
100% {
transform: scaleX(1.000001);
opacity: 1;
}
}
動作しなかったコードは次のとおりです（Chromeで画像がぼやける原因になります）。
@keyframes scale-in-left {
0% {
transform: scaleX(0);
opacity: 0;
}
100% {
transform: scaleX(1);
opacity: 1;
}
}
結局、「機能する」コードはぼやけのほとんどを取り除きましたが、すべてではありませんでした。SafariとFirefoxは、特別な設定がなくてもよりクリアでした。
また、ブラウザウィンドウのサイズを変更するだけで、不要なぼやけが解消されたことにも注意してください。これは、Chromeが最終レンダリングパス（？）の実行に失敗した原因である可能性があります。