iPhone WebKitCSSアニメーションはちらつきを引き起こします

83

これはiphoneサイトです：http： //www.thevisionairegroup.com/projects/accessorizer/site/

「今すぐプレイ」をクリックすると、ゲームが表示されます。銃がスクロールインします。財布とアクセサリーを上下にスクロールできます。手放すと、所定の位置にカチッとはまることがわかります。そのスナップが発生するのと同じように、ちらつきが発生します。私が使用しているWebkitアニメーションは次のとおりです。

'-webkit-transition': 'none'

'-webkit-transition': 'all 0.2s ease-out'

'-webkit-transform': 'translate(XXpx, XXpx)'

アニメーション化するかどうかに基づいて、最初または2番目のトランジションを選択します。変換は、物事を移動する唯一の方法です。

ただし、最大の問題は、[アイテムを一致させる]をクリックしてから、[もう一度再生]をクリックすることです。銃がアニメートされると、アクセサリー/ハンドバッグの背景全体が白くなります。誰かがなぜこれが起こっているのかについての洞察を私に放射してくれませんか？

iphone  css  animation  webkit  flicker 
— ジェイクチャパ
ソース

回答:

126

追加-webkit-backface-visiblityしたところ、ほとんど役に立ちましたが、ページをリロードした後も最初のちらつきがありました。追加したところ-webkit-perspective: 1000、ちらつきは一切ありませんでした。

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
— ウェスベイカー
ソース
21
1000の背後にある魔法は何ですか？他の値（> 0）は機能しますか？
— cYrus 2011
注：これにより、アニメーションがWindows Chrome v19のマウスイベントに応答しなくなります。実際にはこれを追加してもちらつきはありませんが、アニメーションは常に開始されるとは限りません（マウスホバーなど）
— skyline26 2012年
1
注：背面の可視性を追加すると、色のレンダリングが変更されます。背面の可視性をオンまたはオフにした例を次に示します。bit.ly
— Tamik Soziev 2013
3
リンク要素を遷移しようとすると、テキストがちらつくというこの問題が発生しました。背面の可視性を変更すると、アンチエイリアシングが変更され、フォントが非常に薄くなりました。-webkit-font-smoothing：subpixel-antialiasedを使用して修正しました。
— ダン
1
@cYrus私たちは決して知らないと思います
— デニー
39

これを試してみてください、そしてうまくいけばそれが役立つでしょう：

#game {
  -webkit-backface-visibility: hidden;
}
— ドノホ
ソース
2
これはSafariのデフォルトではうまく機能しますが、スタンドアロンモードでは失敗します。あなたはなにか考えはありますか？
— cYrus 2011
18 
body {-webkit-transform:translate3d(0,0,0);}
— ブライアン・ダストス
ソース
これは私のためにそれをしました..しかし#wrapper、ボディに適用するとレイアウトが台無しになるため、要素に適用する必要がありました。
— adamJLev 2011
誰かが背面を見たい場合は「-webkit-backface-visibility：hidden;」動作しませんでしたが、これは完璧です。ありがとう！
— nachtgold 2013
完璧です。-webkit-backface-visibility: hidden;スケール変換がぼやける原因になりました。body {-webkit-transform:translate3d(0,0,0);}御馳走を働いた。
— リアム
私は試していますが、うまくいきません。コードスニペットは次のとおり
— go
1
これは私のために働いた。私の場合、scale(1)ちらつきを引き起こしました。おかげでたくさん
— jansesun
12

私の場合の実際の答えはここにあります。誰かが近くにいた：-webkit-backface-visibility：hidden; しかし、本当の答えは-webkit-backface-visibility：hidden;です。親divに追加する必要があります。

— ヨハン・デ・シルバ
ソース
実際-webkit-backface-visibility: hidden;には、親div、アニメーションdiv、およびアニメーションdivの子に追加する必要がありました。私がそれをしたら、それは完璧に機能しました。
— mattstuehler 2013年
2
親に追加することで、ちらつきも修正されたと思います。それは実際に何をしますか？
— chovy 2013年
親に追加すると、子要素の「固定」位置が元に戻りますが、:(
— James
11

CSSトランジションの「ちらつき」にも問題がありました。問題のアニメーションは、画面外からスライドするメニューであり、アニメーションが終了すると、メニュー全体が点滅/点滅しました。

結局のところ、これは実際のiOS機能である「タップハイライト」が原因でした。これは、CSSアニメーションが終了した後（つまり、実際のタップの直後）に何らかの理由で起動し、要素だけでなくメニュー全体を強調表示しました。それがタップされました。ここで説明するように、タップハイライトを完全に無効にすることで問題を「修正」しました。

-webkit-tap-highlight-color: rgba(0,0,0,0);
— フレスコマ
ソース
5

-webkit-backface-visibility: hidden;この問題にぶつかったとき、マイケルの答えはうまくいきました。私たちは持っていたtranslateZ(0px)私たちの上<body>のiOS 3.1.3およびそれ以前のを防止するために、タグIFRAMEの境界バグを、それがちらつきに寝るのアニメーションを引き起こしました。-webkit-backface-visibility: hidden;アニメーション化した各要素に追加して、ちらつきを修正しました！命の恩人。

— ロブバレカ
ソース
3 
div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

divにホバー状態があると、cssまたはjsがアタッチされていなくても、ページがちらつくことに気づきました。多分これは他の誰かを助けます。

— ジェシー
ソース
私にとっては、その人がそのトリックをしました。その他は、移行が行われた場合にのみ関連していました。
— nadav 2013
3

背面の可視性が機能していないことに気付いた場合は、アニメーション要素にすでにあるプロパティを確認してください。私たちにとって、または配置された要素がiOSで大きなちらつきを引き起こしoverflow-y: scrollていることがわかりました。absolutefixed

単に取り外すだけでoverflow-y: scroll修正されました。

— KendallB
ソース
削除することoverflow-y: scrollは私の場合に役立ちました。どうもありがとうございます！
— YemSalat 2015年
それはおそらく私の場合でもあります。しかし、オーバーフローを削除することはできません-この要素の絶対的な位置はわかりません。何か案が？
— コビコーエン2016
1

私が持ってい-webkit-transform-style: preserve-3d;て-webkit-backface-visibility: hidden、ちらつきがまだ起こっていたにもかかわらず。

私の場合、原因はでしたz-index。アクティブな要素でそれを増やすことは助けになりました。

— モルペウス
ソース
0

これが新しい解決策です。jQueryで背景画像を設定していましたが、3Dレンダリングのトリックはどれも機能しませんでした。そこで、代わりにクラスを使用してプロパティを定義してみました。Voilà！バターのように滑らか。

これによりちらつきが発生します。

$('#banner').css('backgroundImage', 'url("slide_1.jpg")';

代わりに：

$('#banner').attr('class', '.slide-1');

クラスが定義されている場合：

#banner { -webkit-transition: background-image .25s; }
.slide-1 { background-image: url("slide_1.jpg"); }
.slide-2 { background-image: url("slide_2.jpg"); }
— mattwad
ソース
0

私は、Ember Animated Outlets、Phonegap、およびiOSのセットアップでこの問題を理解しようと多くの時間を費やしました。

単純ですが、cssアニメーションに含まれている各トップレベルの親要素に背景を追加する必要がありました。つまり、ビューのどの時点にも背景のない要素がないことを確認してください。

私の設定はテンプレートごとにこれであり、3つの要素すべてに背景色が割り当てられていました。

<header></header> <body class="content"></body> <footer></footer>

— kenorvick
ソース
0

「すべて」に遷移を適用する代わりに、本当に必要なものを指定するだけです。それは私の場合のちらつきを取り除きました。

— シルベストル・ルシア
ソース
0

上記のすべてを試しましたが、FirefoxとChromeでまだ大きなちらつきの問題がありました。私はそれを修正するか、アニメーション中に多くの再描画を引き起こしていたボックスシャドウ変換を削除することで、少なくとも許容できる問題に大幅に減らしました。私はこれに従い、ニーズに合わせて変更しました。

http://tobiasahlin.com/blog/how-to-animate-box-shadow/

— d1ch0t0my
ソース
0

私にとって、サファリのちらつきの問題は削除することで解決しました will-change: transform;、アニメーション要素にました。

またoverflow: hidden;、親に追加することでこの問題を解決できましたが、これにより、すべての要素transform: translateZ()が無効になりました

— Mohsen.Khakbiz
ソース
0

（0ではなく）実際の値を使用する必要がありました：

.no-flick{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform:translateZ(0.1px);
    transform: translateZ(0.1px); /* needs an actual value */
}

例：

<div class="foo no-flick"></div>

私が読んだものからと、ちらつきはブラウザがハードウェアとソフトウェアのレンダリングを切り替えることによって引き起こされます。そして、ブラウザの製造元は、ハードウェアレンダリングを強制するために、古い「translate3d（0,0,0）」を認識していると思います。したがって、これらの偽の値を無視している可能性があります。

=>実際の値を使用すると、物事が「くっつく」可能性があります。

とにかく、私のために働いた。

— ボブ
ソース
0

デフォルトのAndroidWebブラウザーを使用しているときにスライド遷移を実行すると、ちらつきが発生しました。

私は次のトランジションCSSを使用しました：

-webkit-transition: all 2s;
-webkit-transform: translate(100%,0);

このスレッドで言及されている回避策はどれも、問題の解決に役立っていません。ついに私は解決策を見つけました。ちらつきの原因は、考えられるすべての遷移を実行することを意味するallキーワードです。変換のみを実行するように変更し、問題は解決しました。

-webkit-transition: -webkit-transform 2s;
-webkit-transform: translate(100%,0);
— ジュシド
ソース
0

私にとってそれを修正したのは、変換変換CSSルールの割り当てを遅らせることでした。このようなもの：

HTML：

<div class="animate-this loading"></div>

CSS：

.animate-this {
  &:not(.loading) {
    transform: -webkit-translate(50px);
    transform: translate(50px);
    transition: -webkit-transform 0.3s, transform 0.3s;
  }
}

JavaScript（jQuery）：

$(document).ready(function(){
  window.setTimeout(function(){
    $('.animate-this').removeClass('loading');
  }, 250);
});

…私に-webkit-backface-visibility: hidden;は何もしなかったからです。

— ウッドロウシゲル
ソース
0

そのため、他の誰も正しく機能しないこの問題の修正を見つけました。

CSS：

.ios-animation-fixer {
  position: fixed;
  width: 100%;
  height: 10px;
  top: -10px;
  background-color: green;
  z-index: 1;
  pointer-events: none;
  visibility: hidden;
}

HTML：

<div class="ios-animation-fixer"></div>

次にz-index、アニメーション要素のを> 1に設定します。これにより、iOSデバイスがだまされてアニメーションが異なる方法でレンダリングされ、私のシナリオでのちらつきが回避されます。このソリューションがうまく機能しない場合は、z-index値を調整すると役立つ場合があります。

— コリン
ソース
0

2019年更新

トランジションで使用される要素にこれらのルールを追加するだけで、ちらつきをオンにできます。

-webkit-transform: translate3d(0, 0, 0);

サファライで私のために働いた

— Freestyle09
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.