2012-03-23 16 views
1

不透明度を1に設定すると、ipadのパフォーマンスが低下することは明らかです。ipadでの不透明の回避策?

Webkit animations performance on IPad

私はこの問題は、私はiPadのをスクロールダウンしていることである1未満

Screenshot of my app

にいくつかの要素の不透明度を設定することから、非常に有益であろう機能に取り組んでいます不透明度が1未満の要素は表示されません。スクロールが停止しているときだけ、要素が適切にレンダリングされます。誰もが私が必要とする同じ影響を達成するためのトリックを考えることができますか?

答えて

2

iPad上の配置された要素でも同じことが起こります。おそらく、不透明にしようとしているものを、半透明のPNG画像で上書きすることができます。これがあなたのマークアップを見ることなくどれほど難しいかは分かりませんが、あまりにも悪くないでしょう。

2

解決方法1: 透明な背景を使用している場合は、透明なPNGを重ねることができます。

解決策2: または画像スプライトpngを作成することができます。またはjpg本当にあなたの背景に依存します。実際にはオーバーレイをPhotoshopに追加する代わりに、バックグラウンドの位置を入れ替えることになります。

溶液3: 透明度背景幅100%高さ100%を有するpngを有する。

<div id="bg"></bg> <-- set z-index to 1 
<div class="element dead"></div><-- set z-index to 0 
<div class="element alive"></div><-- set z-index to 3 

死んだ要素は、あたかも退色している​​かのように見えます。 ここで実際の動作をご覧ください:http://jsfiddle.net/cma9B/2/

また、ユーザーが要素とやり取りする必要があるかどうかによって、あなたが行きたいルートに違いがあります。

+0

私はその3番目のアプローチが好きです。私はiPadがまだそれに問題があるかどうかは分かりません。テストして戻ってきて、うまくいけば受け入れます。ありがとう! –

関連する問題