問題タブ [translate3d]

PhoneGapを使用してiOSアプリを構築しています。translate3dcSSアニメーションを使用して「フリップ」効果を作成しています。

これは、より単純な要素でうまく機能します...フロント/バックdivとおそらく余分なスパンを持つDIV。

しかし、より大きな要素、つまり画面全体を反転しようとすると、再描画の不具合が発生します。cssクラスを交換して遷移を開始するとすぐに何が起こりますか？「bottom」divの一部が「top」divをポップスルーし、次にフリップが発生し、その後再びポップアウトします。そして、透けて見えるのは要素全体ではありません...私が3D回転を変換しているのは、軸に沿って分割された要素の半分です。

これを引き起こしている可能性があるものについてのアイデアや理論はありますか？これは、アプリとしてのiPadとSafariのデスクトップの両方で同じように発生するため、Webkitの問題のようです。

それはいくつかのCSSの問題でしょうか？または、Safariが処理できる以上の大きな背景画像を持つ複雑なネストされた要素を使用してフルスクリーンのtranslate3d回転を実行しようとしていますか？

更新1：

問題の絞り込みは進んでいます。

何が起こっているのかというと、translate3dフリップを実行するときに「覗き見」している要素は、以前にtranslate3dを介して配置されていた子要素であるということです。

translate3dで移行したい「ページ」構造：

これはそれ自体で機能します。フロントdivは、カードフリップ効果のあるバックdivに置き換えられます。

#front問題は、ページ全体をめくる前に、 translate3dを使用してdiv内のいくつかの要素をアニメーション化したことです。

CSSの例：

translate3dを使用する代わりに、divをtopスタイルで再配置するか、topプロパティを変換するだけの場合、ピークスルーの問題は発生しません。もちろん、それは私がそれぞれ滑らかなアニメーションまたはハードウェアアクセラレーションをあきらめなければならないことを意味します。

この時点では、Webkitのバグのようです。これからも遊んでいきます。誰かが以前にこれに遭遇し、回避策を見つけた場合、私はすべての耳です！

次のシナリオでは、コンテナ内に CSS3 3D 変換が適用された 2 つの div が表示されます。どちらも、クリックされたときにイベントを発生させる必要があります。この場合、クリックされた div を示すアラートが表示されます。

問題は、2 番目の div のみが目的の動作を示すことです。最初の div をクリックしても、表示されたアラートが表示されません (最新の Safari、Chrome、および Safari iOS でテスト済み)。

負の z 値を -100px から 0px または正の値に変更するとすぐに、すべて正常に動作します。

これはブラウザのバグですか？そして、望ましい動作を達成する方法はありますか?

これは少し奇妙です。-webkit-transform: translate3d(0px, 0px, 0px);構築中のサイトの画像に適用すると、最初は問題なく表示されます。しかし、スクロールを開始したり、ブラウザー ウィンドウのサイズを特定のサイズ (およそ 1200x1024 を超える) に変更したりすると、他の画像やサイトの一部が含まれて、画像がすべて壊れてしまいます。すべて伸ばして、切ります。時には色などを変えることさえあります。これは、画像の上に浮かんでいる @font-face テキストにも適用されます。これは、Win7x64/ATI Firepro v5800/Chrome バージョンと組み合わせた非常に孤立したケースだと思います。しかし、この方法でサイトを構築するのは少し面倒です:)

誰かが同様の問題に遭遇し、それを解決する方法を知っていますか、またはこれをGoogleに通知するだけですか?

私が理解しているように、iOSデバイスでのハードウェアアクセラレーションは、translate3d（）を使用すると有効になります。では、なぜjsperfでのこのテストは、css left/topを使用する方が速いことを示しているのでしょうか。

デモhttp://mocheng.github.com/demo/translate3d.htmlとして Mobile Safari で有線の問題を見つけました

translate.html内に iframe としてtranslate3d_iframe.htmlというページが 1 つあります。translate3d_iframe.htmlの要素には、スタイル-webkit-transform: translate3d(0, 0, 0)があり、 3D アクセラレーションを強制します。

興味深い結果は、3D 化された要素が常に他の要素の上に表示され、z-index が低いということです。

さらに興味深いのは、3D 化された要素が他の要素の上に表示されることです。メニュー項目の「hidden by」3D 要素をタップすることもできます (タップすると警告メッセージが表示されます)。

これは Mobile Safari でのみ再現できます。

とにかくそれを回避する方法はありますか？Web 開発者は、iOS ブラウザーがこの種の問題に対処するためにどのように機能するかを知っておく必要があると感じました。

Chromeやその他のWebKitブラウザーで、translate3dが適用されているcssスケールのコンテンツが大幅にぼやけるという問題が発生しています。

これがJSフィドルです：http：//jsfiddle.net/5f6Wg/。（Chromeで表示します。）

これに対する既知の回避策はありますか？上記の簡単な例では、translate3dではなくtranslateを使用できます。ここでのポイントは、コードを必要最低限​​のものまで取り除くことです。

Mac の Safari 5.1.1 には扱いにくいと思われるバグがあります。(また、Mac 上の Firefox で公開されています。)

iScrollを使用してスクロール DIV を設定すると、INPUTまたはTEXTAREAによって発生するスクロールは、translate3d マトリックスを自動スクロールの量だけオフセットします。したがって、たとえば、スクロールして一番上に戻ることができなくなる場合があります。

これは正しくないtranslate3d マトリックスであるため、このバグを回避する方法が見つかりません。要素から取得されたすべての値は正しいように見えますが、スクロールされたコンテンツが正しくオフセットされていません。

注意: これは iScroll のバグではないと確信しています。

どんなアイデアでも大歓迎です！他のブラウザでテストした場合はコメントしてください。

開発中の Webkit Android アプリの入力要素にいくつか問題があります。2.X でテストしていますが、3.x にはこれらの問題はないようです...

このアプリは、「ページ」ごとに個別の Div を持つことで機能します。CSS3 translate3D を使用してページ間をアニメーション化しています。これらのページの一部には、入力要素が含まれています。入力をタップしてフォーカスを得ると、「position:fixed」Div のいずれかが上から約 5 ピクセル、左に 5 ピクセル移動します。さて、キッカー...最終的にはそれ自体が修正され、入力をタップしたときに二度と発生することはありません.それは最初の1回だけです.

私のもう1つの問題は、入力要素がキーボードで厄介です。たとえば、スペル修正/オートコンプリートではテキストが入力されず、Swypeキーボードを使用している場合、単語を「スワイプ」することはできず、各文字を個別にタップするだけでテキストが入力されます入力要素。

これらの多くは CSS3 Translate3D が原因である可能性があると読みました。しかし、私はこれらの問題を解決するためにあらゆることを試しました。解決策を求めてほぼすべてのサイトを検索しましたが、解決策を見つけることができなかったり、この問題を抱えている他の人を見つけることができませんでした...

他の誰かがこれらの問題を抱えているか、修正を知っていますか?

(考えられる解決策??) Webkit の入力要素のデフォルトの動作をオーバーライドする方法を知っている人はいますか? 独自の TextView を生成して、これらの入力フィールドの上に配置できるかどうか疑問に思っています...?

どんな助けでも大歓迎です:)

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コンテンツには次の行があります：

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

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

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

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

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

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

iPad：

iPad 2：

ホームページをSafariのiPhone/iPadで動作させようとしています。<div>問題は、タグ内に埋め込まれたYouTubeビデオをページの周りに移動したいということです。通常、私はjqueryを使用してこれを<div>行い、jqueryオフセットメソッドでタグのオフセットを設定するだけですべてがうまく機能しますが、translate3dで位置を設定しようとすると、奇妙なことが起こり、目的の位置に正しく移動します、しかし、埋め込まれた youtube はまったく移動せず、ページの左上隅にとどまります。

基本的に、translate3d で動画を移動できないようですが、何をしても問題ありません。iframe を使用して YouTube ビデオを埋め込もうとすると、さらに奇妙になります。すべて正常に動作しているように見えます。ビデオは正しい位置に移動していますが、再生ボタンをクリックしてもビデオの再生を開始できません。