web-dev-qa-db-ja.com

CSSトランジション効果でChromeで画像がぼやける/画像が1px移動する

Divがホバーされると、CSSトランジション効果によってdivが移動します。

例からわかるように、問題は 'translate'トランジションがdivのイメージを1px下/右に移動させる（そしておそらくはサイズ変更される可能性があるため）というひどい副作用があることです。場所がずれていて焦点が合っていません...

グリッチはホバー効果が適用されている間ずっと適用されているようで、試行錯誤の過程から変換トランジションがdivを移動させたときにのみ発生しているように思えます（ボックスシャドウと不透明度も適用されますが削除されたときのエラー）.

第2回編集：実際には、問題は解決していません！

JSFiddleを作成する際に、興味深い観察に出会った問題を説明しました。ページにスクロールバーがある場合にのみ問題が発生します。したがって、divのインスタンスが1つだけの例は問題ありませんが、同一のdivが追加されるとページにスクロールバーが必要になるため、この問題が再び発生します。

何か案は？！

cssimagehoverpositioningtranslate-animation
139
Lewis

これをCSSで試しましたか？

.yourDivClass {
    /* ... */

    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

これが何をするかということは、部門が「より二次元的」に振舞うようにするということです。

  • 裏側はデフォルトで回転などで物事を反転できるように描かれています。あなたが左、右、上、下、拡大縮小または時計回りに（反）回転するだけであれば、その必要はありません。
  • Z軸を常にゼロの値に変換します。

編集

Chromeはbackface-visibilityプレフィックスなしで-webkit-とtransformを処理するようになりました。私は現在、これが他のブラウザのレンダリング（FF、IE）にどのように影響するかわからないので、接頭辞のないバージョンを使用する場合は注意してください。

238
sampoh

3D変換を要素に適用する必要があるので、それはそれ自身の複合層を取得します。例えば：

.element{
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

または

.element{
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

レイヤ作成基準の詳細については、こちらをご覧ください。 Chromeでの高速レンダリング

説明：

例（ホバーグリーンボックス）：

要素にトランジションを使用すると、ブラウザはスタイルを再計算し、transitionプロパティが視覚的な場合でもコンテンツを再レイアウトし（私の例では不透明度になります）、最後に要素をペイントします。

screenshot

ここでの問題は、トランジションが発生している間にページ上の「ダンス」または「点滅」要素の効果をもたらす可能性があるコンテンツの再レイアウトです。設定に行き、「複合レイヤーを表示する」チェックボックスをチェックしてから、要素に3D変換を適用すると、オレンジ色の枠で囲まれた独自のレイヤーになります。

screenshot

要素がそれ自身のレイヤを取得した後、ブラウザは再レイアウトやPaint操作さえもせずに遷移時にレイヤを合成する必要があるので問題は解決されなければなりません：

screenshot

86
sol0mka

埋め込まれたYouTubeのiframeで同じ問題を抱えていました（翻訳は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);
}
39
xb1itz

私は最新のブラウザでテストした実験的な新しい属性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+                */

これでブラウザはレンダリングのためのアルゴリズムを知るでしょう

30
Felipez

変換されたときに要素がぼやけてしまう別の理由を見つけたところです。ロードされた要素を再配置するためにtransform: translate3d(-5.5px, -18px, 0);を使用していましたが、その要素はぼやけました。

上記のすべての提案を試してみましたが、翻訳値の1つに10進値を使用していることが原因であることがわかりました。全体の数がぼやけを引き起こすことはありません、そして、私が全体の数から離れるほど、ぼやけは悪化しました。

すなわち5.5pxは要素を最もぼかし、5.1pxは最もぼかします。

誰かに役立つ場合に備えて、ここでこれをチャックすると思いました。

4
ashrobbins

スムーズではなく、段階的な移行を使用して問題をだましました

transition-timing-function: steps(10, end);

それは解決ではありません、それは不正行為であり、どこにでも適用することはできません。

説明できませんが、うまくいきます。他の答えはどれも私を助けません（OSX、Chrome 63、Non-Retinaディスプレイ）。

https://jsfiddle.net/tuzae6a9/6/

3
Evgeny Gendel

zoomを2倍に縮小して半分にすることが私のために働きました。

transform: scale(2);
zoom: 0.5;
2
Kushagra Gour

filter: blur(0);をお試しください

それは私のために働いた

1
Fred K

私は約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>

これが誰かに役立つことを願っています。

1
Adam Orlov

私のために、2018年になりました。私の問題（ホバー上の画像を通る白いグリッチフリッカーライン）を修正した唯一のことは、transform: scale(1.05)を持つimage要素を保持する私のlink要素にこれを適用することでした

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;
}
1
mateostabio
filter: blur(0)
transition: filter .3s ease-out
transition-timing-function: steps(3, end) // add this string with steps equal duration

移行期間の値.3sを等しい移行タイミングステップ.3sに設定することで助けられました

0
j-tap