問題タブ [translate3d]

そのため、translate/translate3d が GPU を利用していることは理解していますが、何らかの理由で、大きなグラフィックスが iPad のブロック/チャンクでレンダリングされています。翻訳を使用する場合、画像の最大幅/高さを示す場所を見つけるのが困難です。

transform プロパティで CSS トランジションを使用できるようにしたいのですが、この問題のために使用できません。「トップ」プロパティでの CSS トランジションでさえ、jQuery.animate() などを使用するよりも実行が遅くなります。

これに関するアドバイスはありますか？

Zynga Scroller JS ライブラリに詳しい人はいますか?

スクロール可能な領域のデフォルトのオフセットを設定するにはどうすればよいですか?

以下を使用して要素の CSS を設定します。

スクロール可能な領域に 200px のオフセットが必要であると仮定すると、コードはページの読み込み時にこれを上書きし、0px に戻ります。200px のオフセットをハードコーディングすると、200px が開始位置であると見なされ、エッジであるかのように跳ね返ります。

何か助けはありますか？

ラッパーdiv内に2つのdivがあります。1つ目はtranslate3d（50px、50px、50px）を介してラッパーの前に配置され、2つ目はtranslate3d（50px、50px、-50px）を介してラッパーの後ろに配置されます。

クリックイベントを内部divにバインドしたいのですが、ラッパーの後ろにあるdivをクリックできません。誰かがこの問題の解決策を知っていますか？

js-fiddle（webkitのみ）：http：//jsfiddle.net/rttmax/zrgdQ/16/

ありがとう。rttmax

絶対配置、CSS 変換、および CSS トランジションに大きく依存する Web アプリを開発しています。

私のマークアップ:

私のCSS

http://jsfiddle.net/KjG3f/24/で実際に動作しているのを見ることができます

この例を Safari (デスクトップと iOS の両方) で見ると、前景の画像が背景によって切り取られていることがわかります。ただし、Chrome では正しく動作しているようです。

背景から translate3d() を削除すると、レンダリングが機能するように見えますが、アニメーションのために translate3d() が必要です。

助けてくれてありがとう。</p>

次の例を考えてみましょう: http://jsfiddle.net/jeanluca/s4Ppf/

#child の初期幅は 100px です。200px を z 方向に変換した後、幅を計算することは可能ですか? のようなことをする代わりに

ありがとう！

jQuery animate と CSS3 animate を比較して実験してきましたが、2D / 3D 変換をテストして、どちらが優れているかを確認したいとも考えていました。

CSS3 translate3d が機能しない理由を誰か知っていますか? デスクトップとモバイルで試してみました。

どんな助けでも大歓迎

jsフィドル

HTML

CSS

jQuery

アイテムのレイアウトに同位体を使用しています。各項目にはポップアップ メニューが含まれます。同位体はtranslate3dアイテムをレイアウトしてアニメーション化するためにメニューの積み重ね順序を使用するため、私たち全員がめちゃくちゃになりました. アイテムには があり、メニューには がありますが、後のアイテムは前のメニューのメニューを非表示にしz-index: 1ますz-index: 2。これを解決する方法はありますか？

動作を示す例を次に示します ( jsfiddle )。

CSS:

HTML:

を使用したリーフレットマップを持っています-webkit-transform: translate3d。

foo上記のコードがあり、の上にあるとしましょうmap。foo（およびそのマージン）を超えるすべてのアイテムはmap、元のビューをいくらか失っています。たとえば、テキストはわずかに異なります。左の境界線の上に境界線があるdivがある場合、map時々（！？）失われる可能性があります。

このバグは私のOSXChromeで発生します。Safariはそれをうまくレンダリングしているようです。

FireFox にはバグがあり、親 (または祖先) 要素のフラッシュ要素が変換されてもレンダリングされません。翻訳を削除すると、すぐに表示されます。

次に例を示します。

Chrome で同じコードをテストしたところ、問題なくレンダリングされました。HTML5 ビデオを使用することが唯一のオプションのようですが、これが修正可能かどうか知りたいです。

ありがとう

アップデート：

ここにバグレポートがあります - https://bugzilla.mozilla.org/show_bug.cgi?id=819763#c0

私は次のCSSを持っています：

このhtmlで：

リンクを最初にクリックしたときはトランジションはありませんが、それ以降のすべてのクリック（開くか閉じるか）でトランジションが発生します。