問題タブ [webkit-transform]

私はレスポンシブWebサイトに取り組んでいます。フォーム フィールドに入力を与えるSamsung Gallaxy SIIとAndroid ブラウザが一番上にスクロールし、キーボードが非表示になります。DUOS

これを使用するかどうか -webkit-backface-visibility: hidden;

この問題は、Firefox、Opera、および Chrome ではなく、Android のデフォルト ブラウザでのみ発生します。

ここにCSSのスニペットがあります。

画像の上にカーソルを置くと、バウンス アニメーションが正常に再生されますが、画像からマウスを離すと、スライドイン アニメーションが再び再生されます。ページの読み込み時にのみスライドインを再生したい。どうすればそれを行うことができますか？前もって感謝します！

iScroll のカスタム バージョンを含む多数のベンダー ライブラリが付属するカスタム ネイティブ コンテナーで実行される Android および iPhone 用の JQM Web アプリを作成しました。最近、iScroll を含むライブラリをベンダーからアップグレードしました。現在、iPhone ユーザーは特定の条件下で視覚的な歪みが見られます (スクリーンショット: http://i.stack.imgur.com/mCUyB.png )。スクロール後に歪みが修正されます。

症状：

• 画面右側に横線が引かれている
• iscroll div の要素が右側を超えて伸びています。(div の左側には丸いエッジがありますが、右側にはありません。これもスクロール後に自動的に修正されます。

これらの両方の条件が満たされると、歪みがトリガーされます。

• より大きなデータセットをダウンロードした後、より多くの DOM 要素が iscroller にアタッチされる
• ユーザーが後方に移動したとき。基本的に、JQM ページとその添付要素が非表示から表示に変わるとき。

div iscroll の CSS コード:

さらにいくつかの観察：

• iscroll は、以前の iscroll バージョンが -webkit-transform を使用していなかったためだと思われます。
• iPhone では、-webkit-transform: translate3dハードウェア アクセラレーションです。
• 歪みは Android ではなく、iPhone でのみ発生します。

他にどのような情報を提供すればよいかわかりません。iscroll のコードを提供することもできますが、800 行のコードです。

これは私の最初の投稿です。穏やかな。

私が取り組んでいるモバイル サイトのアニメーションをいくつか作成しています。現時点では CSS トランジションを使用していますが、ウィジェット (アコーディオン) をプレビューすると、(iPhone で) まったくスムーズにアニメーション化されません。

ハードウェア アクセラレーション デバイスで 2D/3D Transforms(translate) がうまく機能することはわかっています。DIV の高さをスムーズに成長させるために使用できるものはありますか?

サンプルコードは次のとおりです。

どんな助けでも大歓迎です。ありがとう

私は2つの要素を持っています。1つはCSSで縮小されています

もう1つはjQueryによってインラインでスケーリングされます

縮小した後、secondElement と firstElement の幅と高さをピクセル単位で取得する必要があります。私はすべてを試しましたが、なぜこれを取得できないのか本当にわかりません。誰にもアイデアはありますか？ありがとう

基本的に 2D マップである画像要素があり、それに (jQuery を使用して) 次の CSS 変換を適用したとします。

この変換を適用して、2D 画像に「偽の遠近法」効果を適用しました。これで、この画像に X、Y 位置を指す一連の座標がマップされました。

私が知りたかったのは、この変換が与えられた各ポイントの「新しい」X、Y位置を計算するためのテクニックまたは方法があるかどうかです

明確にするために、私はコンピューターグラフィックス理論の知識がありません。私はこの概念実証を開発しようとしていて、HTML画像にこの遠近効果を与え、同時に画像をインタラクティブに保ち、ユーザーはその画像にマッピングされた各ポイントをクリックします

更新 1

変換後に長方形の座標を返す「getBoundingClientRect」というメソッドを見つけました ( https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect ) 。この新しい四角形を使用して元の点が与えられた場合の行列変換は正しいですか? 申し訳ありませんが、私はコンピュータ グラフィックスの理論を本当に理解していないので、この方法を試して動作することを確認したかっただけです。