キーボード使用後にcss3アニメーションがちらつく

Question

私はHTML5/CSS3を使ってiPad用のアプリを開発しています。私はフレームワークを使用しておらず、デバイス上でネイティブにサポートされているものを使用しています。画面間を移動するときに、典型的なiOSスライドを左または右にスライドさせることをエミュレートするために、いくつかのcss3アニメーションを作成しました。以下は、iPadのCSS3ハードウェアアクセラレーションを利用しているスライド左のアニメーションの例です（ipadは4.2で動作しています）。 iPadのキーボードが使用されるまで

 
.incoming, 
.outgoing{ 
display: block !important; 
-webkit-backface-visibility: hidden; 
} 

これは素晴らしい作品：

/************************************************* 
Slide Left 
*************************************************/ 
.screen.slideleft{ 
-webkit-animation-duration: 0.5s; 
-webkit-animation-timing-function: ease-in-out; 
} 
.screen.slideleft.outgoing{ 
z-index: 50 !important; 
-webkit-animation-name: slideleft-outgoing; 

} 
.screen.slideleft.incoming{ 
z-index: 100 !important; 
-webkit-animation-name: slideleft-incoming; 
} 
@-webkit-keyframes slideleft-outgoing{ 
from { -webkit-transform: translate3d(0%,0,0); } 
to { -webkit-transform: translate3d(-100%,0,0); } 
} 
@-webkit-keyframes slideleft-incoming{ 
from { -webkit-transform: translate3d(100%,0,0); } 
to { -webkit-transform: translate3d(0%,0,0); } 
}

はまた、私はちらつきを修正するために使用しようとしてきたこのCSSを持っています。その後、すべてのアニメーションが激しくちらつきます。

私はキーボードを使ったiPad HTML5アプリのサンプルを探していましたが、その後はちらつきはありませんが、あまり気にしませんでした。 jqTouchのデモは、iPad上で同じ動作を示します（ただし、iPhone向けに設計されています）。

私は同様の質問の投稿/質問をいくつか挙げてきましたが、良い答えは見つけられませんでした。私はhttp://css3animator.com/2010/12/fight-the-flicker-making-your-css3-animation-bomb-proof/を通り抜けて記事をリンクしてきましたが、何の成功もありませんでした。

他の提案はありますか？

午前9時

私はこのCSSを追加しましたし、それはたくさん助け@更新1/13：

 
.incoming *, 
.outgoing *{ 
-webkit-backface-visibility: hidden; 
-webkit-transform: translate3d(0,0,0); /* This helps with the flicker a lot. */ 
} 

The foreground elements don't seem to flicker anymore, but the backgrounds still do. Still looking for some help or helpful resources on Mobile Safari's memory handling tactics.

Update 1/16 @ 11pm

Increasing the z-index as suggested by anonymous. Didn't seem to make a difference.

Update 1/17 @ 8:30am

I've posted a demo of the problem here .

The transitions between screens work great...until you tap/click inside one of the form fields. After the keyboard slides up and returns, all the transitions flicker. Go to the URL inside the iOS simulator or on an actual iPad to see what I'm talking about.

Answer 1

に戻っtransistion -1にし、後に移動しているページのzインデックスを設定します

最終的に、この問題の修正は実際にはありませんでした。iPad上のWebKitのフォーム要素がちらつきの問題を引き起こすようです。

私の回避策は、各フォーム要素のonblur上で、ハッシュタグを使用してページをリフレッシュして、まったく同じ状態にリフレッシュすることでした。それはまだそれが爽やかである間に "ちらつき"を引き起こしたが、アプリの残りの部分で画面がちらつくのを防いだ。

Answer 2

You're not going to like me saying this, but JavaScript may be the answer you're looking for. I fear that when you bring the keyboard up, the process of rendering the HTML loses priority. With a continually updating script, like a setIntervalループは、iPadは計画通りにレンダリングするしかないでしょう。明示的なコードはハックを必要としません。

Answer 3

ソースを見ると、移行が始まるまでtranslate3d（0,0,0）は適用されません。

はちらつきは、おそらく（それが現在唯一の3D翻訳要素上で動作）で蹴る、ハードウェアアクセラレーションである

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

または

.screen *, .screen{ 
     -webkit-transform: translate3d(0,0,0); 
} 

を試してみてください。私はベンに同意

Answer 4

は、おそらく設定する必要があり、クラスだけでなく自分自身に変換します。

/************************************************* 
Slide Left 
*************************************************/ 
.screen.slideleft{ 
-webkit-animation-duration: 0.5s; 
-webkit-animation-timing-function: ease-in-out; 
-webkit-transform: translate3d(0,0,0); 
} 
.screen.slideleft.outgoing{ 
z-index: 50 !important; 
-webkit-animation-name: slideleft-outgoing; 
-webkit-transform: translate3d(-100%,0,0); 
} 
.screen.slideleft.incoming{ 
z-index: 100 !important; 
-webkit-animation-name: slideleft-incoming; 
-webkit-transform: translate3d(0,0,0); 
} 
@-webkit-keyframes slideleft-outgoing{ 
from { -webkit-transform: translate3d(0,0,0); } 
to { -webkit-transform: translate3d(-100%,0,0); } 
} 
@-webkit-keyframes slideleft-incoming{ 
from { -webkit-transform: translate3d(100%,0,0); } 
to { -webkit-transform: translate3d(0,0,0); } 
} 

問題が解決しない場合は、私が唯一translateX(-100%)修正してXを翻訳するかどうかをテストするために好奇心だろう問題。 （3D変換なしのハードウェアアクセラレーションがないため、問題の絞り込みに役立つので、必ずしも修正ではありません）

Answer 5

私は同じ問題を抱えていましたが、フリッカーを適用することでほとんど目立たなくすることができました修正はこことここで説明：

http://code.google.com/p/jqtouch/issues/detail?id=301

https://github.com/senchalabs/jQTouch/issues/issue/130

は基本的に1

Answer 6

私は最近、同じ問題を抱えていて、あらゆる種類の複雑な修正を試みました。最後に、問題は入力のデフォルトのスタイルになっていたことがわかりました。私はCSSを追加することで問題を解決しましたinput{outline:none}。それはちょうど焦点状態のprobなので、input:focus{outline:none;}はうまくいくはずです。

Answer 7

これは恐竜の古い質問ですが、この問題の解決策がありますが、非常に軽量で非常に簡単です。アプリのコンテナのdivの外に、また設定：最終的に助けた唯一のことは、モーダルウィンドウを作成することでした（絶対位置を） - 私もこの問題に対処した時

document.getElementById('clicked_input').addEventListener('focus', function(e){ 
    e.stopPropagation(); 
},false); 

は、私はすべてがしようとしたと思いましたアプリのコンテナdivが表示されます：false;キーボードが上がっていたとき。それがうまくいっている間、私はイベントを引き起こしたものを見るためにすべてをテストしました。そして、「フォーカスイベント」が起き上がったとき、すべての3Dトランスフォームが狂ってしまいます（ちらつきとパフォーマンス）。

バブリングが発生しないようにすることで、この問題は完全に解決されました。このような嫌なバグには簡単な解決策がありましたか？

Answer 8

これは古い質問ですが、私は自分の経験を共有すると思いました。

私はiPad上で（iPhoneの場合と同様ですが、その場合はポートレート表示でのみ）驚異的なちらつき（css3アニメーションで）に関する問題を抱えています。

-webkit-perspective: 0; 

アニメーション化されている要素について、私は完全にちらつきの問題を解決できました。なぜこれが動作するのか分かりませんが、それは（iOS 4.2以降、iPad（1と2）とiPhone 4の両方でテストされています）。

アップデート：この属性の値を1に設定すると、Chromeの問題を認識したばかりです。これは0のときに正常に機能するため、上記を適切に更新しました。