7

iPadとiPhone用のHTML5+CSS3アプリケーションを開発しています。このアプリはiPadとすべてのiPhoneで正常に動作しますが、iPad2は起動時にピクセル化されたhtmldomオブジェクトを表示し、場合によっては常に、場合によってはしばらくの間、その状態を維持します。

アプリはタッチとジェスチャー用に設計されています。スクロールオブジェクトのハードウェアアクセラレーションにはtranslate3Dを使用しました。jQuery（v1.7）も使用していますが、設計したスクローラーは純粋なjavascriptであり、フレームワークはありません。jQueryは主に、domオブジェクトとajaxの検索/追加/削除に使用されます。jQueryを除いて、私たちが使用しているjQueryプラグインを含め、他のすべては社内で作成されています。

私が言ったように、アニメーションはtranslate3Dによって実現されます。スライド効果の場合、-webkit-transformのx軸またはy軸の値を変更します。タッチエンドイベントを受信すると、javascript、-webkit-transition、およびtranslate3Dを使用して勢いのあるアニメーションが実現されます。アプリの作成中は、AppleのiOSSafariドキュメントがガイドとして頻繁に使用されます。

アプリはiPad、iPod Touch（第2世代）、iPhone 3gs、iPhone 4で正常に動作していますが、iPad 2でのテストに関しては、このピクセル化された画面が表示されるようになりました。最も奇妙な部分は、3Dアクセラレーションされたコンテンツがピクセル化される唯一の部分であるということです。2つのスクリーンショットを添付しました。1つはiPadからのもので、もう1つはiPad2からのものです。私が何を意味していたかがわかります（同じ日の異なる時間に撮影されているため、内容が異なります。申し訳ありません）。

メインコンテンツ（画像付きのボックス）は、タッチイベントで上下にスライドできます。iPad2では、この部分だけがピクセル化されます。スライドしている間、ピクセル化はほとんどの場合残りますが、一部のテストでは、数秒後にリセットされます。

さらに、htmlコンテンツには次の行があります：

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

CSSを介してハードウェアアクセラレーションを開始しており、メインのスライドオブジェクトには次のプロパティがあります。

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

ちらつき防止の場合、画像は背景色のあるdomオブジェクトの内部にはなく、次のプロパティがあります。

-webkit-backface-visibility: hidden;

場合によってはちらつきを防ぐために、このプロパティを使用しました（ただし、スクリーンキャプチャのピクセル化されたコンテンツには、このプロパティが割り当てられていません）。

-webkit-perspective: 0;

このアプリには現時点では「apple-touch-startup-image」がないため、最初に考えたのは、iOSが作成するスタートアップキャプチャがどういうわけか混乱しているということでした。しかし、コンテンツがWi-Fi経由でダウンロードされた後、ピクセル化は同じままであるため、それは問題ではないことがわかります。

誰かがこの問題または同様の問題に遭遇し、それを解決できた場合は、他にアイデアが残っていないので、答えてください。

私はできるだけ多くの情報を提供しようとしました、そしてここに私が約束したスクリーンショットがあります：

iPad：

iPadのスクリーンショット、メイン画面は正常です

iPad 2：

iPad 2のスクリーンショット、ご覧のとおり、メイン画面はかなりピクセル化されています

4

1 に答える 1

2

変換を削除し、タイムアウトしてすぐに再適用してみてください。

$("#sliding").css("-webkit-transform: none");
setTimeout(
  $("#sliding").css("-webkit-transform", "translate3d(0,0,0)")
, 0);
于 2011-12-16T19:50:16.263 に答える