web-dev-qa-db-ja.com

webkit-transformのwebkit-transitionのちらつきを防ぎます

可能性のある複製：
iphone webkit cssアニメーションがちらつきを引き起こす

何らかの理由で、webkit-transformプロパティのアニメーションが発生する直前に、わずかなちらつきがあります。ここに私がやっていることがあります：

CSS：

#element {
    -webkit-transition: -webkit-transform 500ms;
}

JavaScript：

$("#element").css("-webkit-transform", "translateX(" + value + "px)");

移行が行われる直前に、ちらつきがあります。これがなぜなのか、そしてどのように問題を修正できるのか考えていますか？

ありがとう！

更新：これはSafariでのみ発生します。アニメーションは機能しますが、Chromeでは発生しません。

csscss-transitionscss-transforms
158
devongovett

解決策は次のとおりです。 iPhone WebKit CSSアニメーションがちらつきを引き起こす 。

要素については、設定する必要があります

-webkit-backface-visibility: hidden;
272
rpitting

ルール：

-webkit-backface-visibility: hidden;

スプライトまたは画像の背景には機能しません。

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

タイル張りの背景を台無しにします。

私はノーフリックと呼ばれるクラスを作成し、これを行うことを好む：

.no-flick{-webkit-transform:translate3d(0,0,0);}
81
ablemike

点滅する要素にこのcssプロパティを追加します。

-webkit-transform-style: preserve-3d;

（そしてNathan Hoadに大きな感謝： http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit ）

51
Michael Bar-Sinai

私は使用しなければなりませんでした：

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

要素で、またはページの読み込み後に最初に遷移が発生したときにまだflickrを取得します

17
Kevin H

より詳細な説明については、この投稿をご覧ください。

http://www.viget.com/inspire/webkit-transform-kill-the-flash/

私は間違いなくそれを全身に適用することを避けます。重要なのは、将来変換する予定の特定の要素が3Dでレンダリングされるようにすることです。これにより、ブラウザーがレンダリングモードを切り替える必要がなくなります。追加中

-webkit-transform: translateZ(0)

（または前述のオプションのいずれか）をアニメーション要素に追加すると、これが実現します。

15
Dan Tello

-webkit-backface-visibility: hidden;を翻訳要素に適用し、-webkit-transform: translate3d(0,0,0);をそのすべての子に適用すると、ちらつきが消えることがわかりました

11
Adam Carter

問題のある要素のハードウェアアクセラレーションレンダリングをトリガーします。パフォーマンスのために、*、body、またはhtmlタグでこれを行わないことをお勧めします。

.problem{
  -webkit-transform:translate3d(0,0,0);
}
4
dontmentionthebackup

上記の2つの答えはどちらも、同様の問題を抱えて機能します。

ただし、body {-webkit-transform}アプローチにより、ページ上のすべての要素が3Dで効果的にレンダリングされます。これは最悪のことではありませんが、テキストやその他のCSSスタイルの要素のレンダリングをわずかに変更します。

それはあなたが望む効果かもしれません。ページでlotの変換を行う場合に便利です。それ以外の場合、変換する要素の-webkit-backface-visibility：hiddenは、最も侵襲性の低いオプションです。

1
Eric D. Fields