web-dev-qa-db-ja.com

CSS3のtransition / transform / translate3dは、トランジションの最初または最後の「フレーム」で深刻なちらつきを引き起こします（iPadの場合）

すべて、

私はiPad専用のWebアプリに取り組んでおり、CSS3トランジションを使用してdivをアニメーション化しています（左から右に移動します）。

私のクラスは次のようになります。

.mover {
    -webkit-transition:all 0.4s ease-in-out;
}

ユーザーがボタンをクリックすると、次のようになります。

var s = "translate3d(" + newPosition + "px, 0, 0)";
$('.mover ').css('-webkit-transform', s);

これはうまく機能します[〜＃〜] exception [〜＃〜][〜＃〜] first [〜＃〜]ユーザーが遷移をトリガーする時間。初めて、非常に目立つちらつきがあります。

Divを左右に動かすだけなので、translate3dを使用する必要がないことに気付きましたが、理解しているように、これによりiPadはGPUアクセラレーションを使用するようになります。 （これは正しいです？）

よろしくお願いします！

[UPDATE]

「ちらつき」については少し曖昧でした。要するに-私は（特にiPadで）さまざまなCSS3トランジションを試してきましたが、一貫して-startまたはendではっきりとしたちらつきに気づきました。 =遷移の。

言い換えれば、遷移自体は非常にスムーズです。ただし、正確な設定によっては、遷移が開始または終了する直前に顕著なちらつきがあります。

別の例を次に示します。3枚の写真（PNG）を積み重ねています。

下のPNGの不透明度は1.0、上の2つのPNGの不透明度は0.0です。 -webkit-keyframesを使用すると、写真がフェードインおよびフェードアウトするときに、滑らかで滑らかなトランジションを取得できます。アニメーションが終了すると、下の写真はopacity = 1.0で終了し、上の2つの写真はopacity = 0.0で終了します。 （それが彼らの最終状態になるはずです）。

ただし、アニメーションが終了すると、下の写真がちらつきます。それはまるでブラウザが画面を再描画/再描画することを強制されているかのようであり、それは数分の1秒かかります。

エフェクトを台無しにして、トランジションを使用できなくするのは十分に悪いことです。 （私のiMacではほとんどですが、まったく認識できません。iPadでは必見です）。

jqueryanimationcss
18
mattstuehler

すべて、

私はpositiveこれが答えだとは思いません（特にちらつき自体が少し予測できないように見えるため）が、逸話的に、これはそれを取り除くようです...

とにかく、これが私がしていたことです：

.mover {
    -webkit-transition:all 0.4s ease-in-out;
}

var s = "translate3d(" + newPosition + "px, 0, 0)";
$('.mover ').css('-webkit-transform', s);

多くの場合、[〜＃〜] first [〜＃〜]これが実行されたとき、アニメーションが始まる前にちらつきが見られます。後続の呼び出しはスムーズにアニメーション化されます。

私が推測したのは、アニメーションを呼び出す前に3D座標が設定されていないと、ちらつきが見られるということでした。最初の呼び出しでこれらの座標が設定されるため、後続の呼び出しはスムーズにアニメーション化されます。

だから-アニメーションがトリガーされる前に、最初にdivの3D座標を設定しようとしました（基本的に、最初に画面を構築するとき-つまり初期化）。

したがって、その後、3Dアニメーションが必要になると、div /要素の開始3D座標がすでに確立されています。

それはちらつきを取り除くようです。

私が言ったように、これが堅牢で信頼性の高い修正であるかどうかはわかりませんが、現在のプロジェクトの問題は確実に解消されています。

幸運を。

5
mattstuehler

私は同じ問題を扱っていましたが、SOで解決策を見つけました： iPhone WebKit CSSアニメーションはちらつきを引き起こします

追加するのと同じくらい簡単です

-webkit-backface-visibility: hidden;

そしておそらく

-webkit-perspective: 1000;

各アニメーションオブジェクトに。それは私のために働いた、これがあなたにも役立つことを願っています

33
Bob Vork

ビューポートを修正することで、ちらつきやフォントの問題を解決しました。

以前は、コンテンツがページから外れ（スライドdiv）、ビューポートが固定されていないときにデバイスが接続されているように見え、表示されたコンテンツのズーム機能と組み合わせて画面からデータを処理する必要がありました。

頭の中のこのタグは私たちの問題を解決しました。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
5
xiatica

試してみてください

.mover {
    position:absolute;
    -webkit-transition:-webkit-transform 0.4s ease-in-out;
}

しかし、私が理解しているように、これはiPadにGPUアクセラレーションを使用することを強制します

Translate（）とtranslate3d（）はどちらもスタッキングコンテキストを作成し、レイヤー（GPUの観点からはテクスチャバッファー）を使用する場合があります。ですから、加速に関しては実際には何の違いもないと思います。

1
c-smile

私はこの問題を抱えており、上記のすべての推奨事項を試しました。顔のz-indexが問題を引き起こす可能性があることを発見しました。

私はこのような角度で3つのペインを1つの中央（フラット）両側に持っていました\ _/-zインデックスが側面の上または同じである間、中央のペインはちらつきました。一番下に移動すると、ちらつきが完全に修正されました。

お役に立てば幸いです。

0
WebsterDevelopine
div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

divにホバー状態があると、cssまたはjsがアタッチされていなくても、ページがちらつくことに気づきました。私はあなたのhtmlを見ることができませんが、これは役立つかもしれません

0
Jesse