問題タブ [translate3d]

IE 10 でサポートされているテクノロジによると、私が達成しようとしているものは機能するはずですが、何が起こっているのかわかりません。firefox と chrome では正常に動作しますが、IE10 では正しくレンダリングされません。

私は IE のサポート ドキュメントを使い果たしました。私が言ったように、これは機能するはずです。

ここに JS Fiddle [JSFiddle] があります: http://jsfiddle.net/qzDV3/1/

助言がありますか？

レスポンシブ ナビゲーション メニューに CSS 3D 変換と 3D のスケーリングを使用しています。タッチ デバイス、より具体的には iPhone では、同じページの個別の jQuery アニメーションの実行が遅くなり、まるでアニメーション中にストロボが発生するかのようになります。誰でもこの問題に光を当てることができますか?

関連性がある場合は、SASSを使用しています：

以下は、動作が遅い jQuery のスニペットです。

よろしくお願いします！

を使用するとtransform: translate3d、safari 6.0.4 http://jsfiddle.net/xcrUc/19/でグレースケール バグが発生します。サファリで画像をグレースケールにレンダリングする他の方法は何ですか、またはtransformプロパティを変更せずにそのバグを修正するにはどうすればよいですか? これは、Safari で yandex マップをグレースケールしようとしたときに発生します。

たとえば、絶対配置された 2 つの div がある場合、最初の div の z-index を 2 番目の div より高く設定することで、最初の div を 2 番目に配置できます。translateZ() または translate3d を使用してそのような動作を実現できますか?

phonegap での CSS トランジションの操作に少し問題があります。transform: translate3d プロパティを移行して、コンテンツ ビューをスライド インおよびビューから外したり、スライドしてサイド バーを表示したりします。

以下は webapp の例です (トランジションはブラウザで動作することに注意してください): http://ferriesapp.ca/app/

携帯電話とデスクトップの両方のブラウザでトランジションが完全に機能することがわかります。しかし、「phonegap」するとすぐに、トランジションがレンダリングされません。最終的な位置が表示されます。たとえば、出発リストの項目をヒットすると、対応する到着リストの項目が表示されます。しかし、何らかの理由でアニメーションが電話ギャップで発生しません。唯一の例外は、phonegap を通過したときに iOS7 で動作することですが、iOS 6 や Android のどのバージョンでも動作しません。

コードの小さなスニペットを次に示します。

スライド要素の CSS は次のようになります。

アニメーションクラスは次のとおりです。

最後に、それを呼び出す JS (これは関数全体ではないことに注意してください):

誰かが何か提案があれば、彼らは大歓迎です

ありがとう！

PS非常にうまく機能するCSS3 @keyframesルールがあることは知っていますが、コードを簡単にするためにそれを避けたいと思います

私は iOS デバイス用のプロジェクトに取り組んでおり、translate3d を使用して、ユーザーがオブジェクトをドラッグしたときにオブジェクトをページ内で移動しています。

Chrome (または Safari) で表示すると、ボックスが非常にスムーズに移動することがわかりますが、iPhone または iPad で表示すると、ボックスはまったくスムーズに移動しません。iOS で translate3d を使用して CSS トランジションを使用すると、トランジションが非常にスムーズになるため、なぜそうでないのかわかりません。これを修正する方法はありますか？

これが私のJavaScriptです:(JSFiddle: http://jsfiddle.net/Ls4uc/10/ )