web-dev-qa-db-ja.com

iPhone WebKit CSSアニメーションがちらつきを引き起こす

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

ただし、最大の問題は、「アイテムの一致」をクリックしてから、「もう一度再生」をクリックすることです。銃が動くと、アクセサリー/財布の背景全体が白くなります。誰かがこれがなぜ起こっているのかについての洞察を私に放射してください。

iphonecssanimationwebkitflicker
79
Jake Chapa

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

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
125
Wes Baker

これを試してみてください。

#game {
  -webkit-backface-visibility: hidden;
}
38
donohoe
body {-webkit-transform:translate3d(0,0,0);}
17
Brian D'Astous

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

12
Johan De Silva

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

判明したように、これは実際のiOS機能である "tap highlight" が原因で、CSSアニメーションの終了後（実際のタップ後）に何らかの理由で起動し、タップされた要素のみではなく、メニュー全体。 here ：のように、タップハイライトを完全に無効にして問題を「修正」しました。

-webkit-tap-highlight-color: rgba(0,0,0,0);
11
fresskoma

マイケルの答え _-webkit-backface-visibility: hidden;_は、この問題が発生したときに機能しました。 iOS 3.1.3以前のIFRAME境界バグを防ぐために_<body>_タグにtranslateZ(0px)があり、アニメーションがちらつきました。アニメーション化した各要素に_-webkit-backface-visibility: hidden;_を追加すると、ちらつきが修正されました！命の恩人。

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

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

3
Jesse

誰かがbackface-visibilityが機能していないことに気付いたら、アニメーション化された要素に既にあるプロパティを見るかもしれません。私たちにとって、overflow-y: scrollabsoluteまたはfixedに配置された要素で、iOSで大きなちらつきが発生していました。

単に削除overflow-y: scrollそれを修正しました。

3
KendallB

-webkit-transform-style: preserve-3d;および-webkit-backface-visibility: hiddenちらつきがまだ発生していました。

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

1
Morpheus

それで、私はこの問題の修正を見つけましたが、他の誰も適切に動作しませんでした。

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
Colin

トランジションを「すべて」に適用する代わりに、本当に必要なものを指定するだけです。それは私のケースのちらつきを取り除きました。

0
Sylvestre Lucia

これが新しいソリューションです。私は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"); }
0
mattwad

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

次の移行CSSを使用しました。

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

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

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

実際の値（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
bob

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

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

0
d1ch0t0my

私にとってそれを修正したのは、transform-translate 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;はしませんでしたanything.

0
WoodrowShigeru

これを試してくださいsolution。 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

0
Baked Inhalf

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

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

0
Mohsen.Khakbiz

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

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

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

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

0
kenorvick