86

これは 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 番目のトランジションのいずれかを選択します。トランスフォームは、物事を動かす唯一の方法です。

ただし、最大の問題は、[Match items] をクリックしてから [Play again] をクリックする場合です。銃が動き出すと、アクセサリー/財布の背景全体が白くなります。なぜこれが起こっているのかについて、誰かが私に洞察を与えてくれませんか??

4

21 に答える 21

128

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

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
于 2010-08-11T18:49:44.957 に答える
39

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

#game {
  -webkit-backface-visibility: hidden;
}
于 2010-07-28T01:42:26.613 に答える
19 
body {-webkit-transform:translate3d(0,0,0);}
于 2010-10-14T14:33:23.097 に答える
12

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

于 2012-07-02T11:21:06.567 に答える
5

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

于 2010-09-11T03:38:36.023 に答える
3

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

削除するだけoverflow-y: scrollで修正されました。

于 2014-07-08T01:53:12.947 に答える
3 
div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

cssやjsが添付されていなくても、divにホバー状態があるとページがちらつくことに気付きました。多分これは他の誰かを助けるでしょう。

于 2013-04-08T23:05:08.740 に答える
1

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

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

于 2015-11-17T14:05:14.837 に答える
0

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

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

于 2016-07-28T12:12:30.483 に答える
0

この解決策を試してください。Phonegap + jQM 1.4.0で動作します:

これを変える<meta name="viewport" content="width=device-width, initial-scale=1">

代わりにこれに：

<meta name="viewport" content="width=device-width, user-scalable=no" />

詳細はこちら: http://www.fishycode.com/post/40863390300/fixing-jquery-mobiles-none-transition-flicker-in

于 2014-04-03T13:48:37.223 に答える
0

私は、 Ember Animated Outlets、Phonegap、および iOSのセットアップに関するこの問題を解決するために多くの時間を費やしました。

シンプルですが、css アニメーションに含まれる各最上位の親要素に背景を追加する必要がありました。言い換えれば、ビューのどこにも背景を持たない要素がないことを確認してください。

私のセットアップは各テンプレートで次のとおりで、3 つの要素すべてに背景色が割り当てられていました。

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

于 2014-06-16T18:24:38.447 に答える
0

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

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

$('#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"); }
于 2013-09-07T17:59:51.820 に答える
0

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

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

于 2016-06-07T12:11:29.037 に答える
0

2019年更新

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

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

サファリで私のために働いた

于 2019-11-27T19:09:53.897 に答える