問題タブ [webkit-transform]

staticCSS アニメーションがトリガーされ、オブジェクトが CSS を使用して( relative、など)以外の位置に配置されると、absoluteオブジェクト内のテキストがアニメーションの継続時間中に突然非常に薄くなります。その後、全幅に戻ります。

このページを Safari で実行してみてください: http://pastehtml.com/view/bjgaloxjj.html (明確にするために更新)

#contentdiv が絶対的または相対的に配置されていない場合、問題はなくなることに注意してください。これは iPad Web アプリ用であり、デスクトップよりもデバイスで顕著です。

この干渉の原因について何か考えはありますか?

明確化のために編集:ハードウェアで高速化されているため使用する必要があり、これによりアニメーションがよりスムーズになりますwebkit-transform。webkit-transition

次の CSS 変換を HTML 入力ボックスに適用しました。

表示領域がいっぱいになるまで入力ボックスにテキストを入力すると、キャレットは入力の端を超えて非表示になります。通常、入力するとキャレットとテキストがスクロールします。

キャレットが事前にスケーリングされた入力の幅になると、テキストは最終的にスクロールを開始します。テキストをスクロールするタイミングを計算するときに、ブラウザがスケーリングを無視しているようです。

これは WebKit ブラウザーのみの問題です (Chrome と iPad でテスト済み)。-moz-transform に相当するものは、FireFox で正常に動作します。ズーム プロパティは Webkit では正常に機能しますが、iPad でスケーリングするときは十分に滑らかではないため、実際には自分のプロジェクトでは使用できません。

ここで例を見ることができます: http://jsfiddle.net/4Kv6w/

最初の入力ボックスは -webkit-transform スケーリングです。2 番目のボックスは、ズーム セットです。3つ目は普通です。

どんな助けでも大歓迎です。

編集- -webkit-transform を使用して入力ボックスを左に移動することにより、スケーリングなしで問題を取得することもできます。例を次に示します: http://jsfiddle.net/4Kv6w/15/

UIWebViewiPhone アプリ内で HTML5 コンテンツをレンダリングするために を使用しています。

HTML5 には、Webkit Transform アニメーションがほとんど含まれていません。

私の問題は、iOS 4.x ではアニメーションがスムーズですが、iOS 5 (iPhone と iPad の両方) で同じことをテストすると、アニメーションが遅いように見えることです。

ところで、iOS 5 の Mobile Safari で同じ HTML コンテンツをロードすると、うまく機能するようです。

これについて何か考えはありますか？UIWebViewこれは、iOS 5 で Nitro (JavaScript JIT) がサポートされていないことが原因でしょうか? UIWebViewアニメーションを強化するために iOS5 で手動で設定する必要がある にプロパティ/メソッドはありますか?

CSS3 変換を適用した div のサイズを取得したいと思います。

したがって、事実上、要素を元のサイズの 30% にしました。ただし、要素の幅/高さを照会すると、変換が適用される前の要素のサイズが報告されます。

これは実際には正しい動作であり、要素のサイズは実際には変更されませんが、そのコンテンツは変更されることを理解しています。しかし、私がここで質問している理由は、要素を右クリックしてポップアップ メニューから [要素を検査] を選択すると (私は今、Mac で Safari を使用しています)、要素が強調表示され、レンダリングされたサイズは、要素に添付されたブラウザーのツールチップに表示されます。

したがって、これはブラウザがレンダリングされたサイズを「知っている」ことを示唆していますが、この情報にアクセスする方法はまだ見つかりません。誰でも私を助けることができますか？

異なるWebkitトランスロメーションが適用された6つのキャンバスを含むdivがあり、このdivのコンテンツを1つのキャンバスに「描画」したい（このdivの「スクリーンショットを撮る」）。ただし、divをキャンバスに直接描画する方法はなく、変換されたキャンバスを別のキャンバスに描画しようとするとWebkit変換が適用されないため、少し注意が必要なようです。

キャンバス変換（拡大縮小、平行移動など）を使用してこれらのキャンバスを適切に描画することは可能ですか？3D変換を2Dに変換するのに役立つ優れたライブラリはありますか？前もって感謝します。

ウィンドウ サイズに基づいて iframe をスケーリングしようとしています。iframe を通過するのは、1600px x 900px の html5 ゲームです

以下のスクリプトを使用してゲームをスケーリングしたので、多くのことができることがわかりました。以下のコードはゲームを小さなボックスにレンダリングしますが、16:9 のアスペクト比を維持しながらウィンドウに合わせて拡大縮小する方法はありますか?

参考までに、私はゲーム アーティストであり、クエスト ダイアログやその他の小さなゲーム機能にコード (javascript/css/html) のみを使用しています。私は現在、このプロジェクトに取り組んでいる最後の 1 人であり、この機能をゲームに実装するように要求されました。

どんな助けでも大歓迎です！

WebKit変換の変更をdomスタイルattrに適用すると、たとえば次のようになります。

から変更する：

に：

このレンダリング変更ハードウェアは加速されていますか？もちろん、ブラウザでサポートされている場合。

更新: フィドルをセットアップしましたが、問題なく動作しているようです - 最初にスライドインするセクションには Google マップが含まれています - これが実際に問題なのだろうか...

最近、作業中の HTML5 アプリに -webkit-transform カード フリップを追加しました。これには、水平方向に移動する単純なカルーセルが奇妙な動作を示すという不幸な影響があります。

私のカルーセルはこのように構成されています

そして、それを循環する私の jQuery .click() 動作は次のとおりです。

$('#sections').stop().animate({"left": -($('#someDiv').position().left)}, 500);

カード フリップ用の -webkit-transform CSS を追加するまで、これは問題なく動作します。

使用時にカードが正常に反転するようになりました

そして、私のカルーセルはまだ機能しますが、スタックしているようです-たとえば、部分的にスライドして、何らかの方法でdivと対話するまで所定の位置に留まり、その後正しい場所にスナップします.

問題は次のようです

それらを CSS から削除すると、カルーセルは正常に機能しますが、フリップは機能しません。

Safari と Chrome の両方でテストしましたが、結果は同じです。任意の考えをいただければ幸いです。

iPhone用のタッチイベントと組み合わせたキュービックバイザータイミング関数を使用して要素をアニメーション化し-webkit-transform: translate3d(x,y,z)、カスタムのscrollmethodタイプのものを作成しています。

問題は、要素（この場合はページdiv）が特定のサイズを超えると、アニメーションが途切れる（要素が0.5秒間停止する）ことです。幅が320px、高さが1000pxの場合、これはすべて問題なく機能しますが、高さを2000pxにすると、不快なスタッターが発生します。読み込み中のように、最初は1回だけ途切れることに注意してください。その後、問題はありません。

既知の回避策はありますか？

現在、新しいプロジェクトでTwitterBootstrapを使用しています。プロジェクトの主要部分は、例にあるものとまったく同じサムネイルギャラリーです（ここ：http ：//twitter.github.com/bootstrap/components.html#thumbnails ）。

問題は、現在、EXIF方向データに従って、必要に応じて画像をcss変換（基本的には回転）していることです。に変換を適用すると（Chromeでテストしているので、今のところ-webkit-transformを使用）img、その親要素は同じままで、画像はそのコンテナーを「オーバーフロー」します。

Chromeを使用すると、前にリンクしたサムネイルギャラリーの例に移動して、プレースホルダー画像の1つを調べ、タグにstyle="-webkit-transform: rotate(90deg)プロパティを追加して、この動作をテストできます。画像がコンテナ要素をimgオーバーフローし、レイアウトが崩れます。li

これを解決し、ブートストラップでcss-rotatedイメージを元々そのように処理する方法はありますか？タグの高さと幅を手動で設定することを考えたところimg、親が調整しましたが、実際にレンダリングされる前に、サーバー側で画像がレンダリングされるサイズがわからないため、これは除外されているようです。アプローチ。

ああ、ちなみに、サーバー側でローテーションすることに頼ることができることはわかっています。難しいことではないことはわかっています。可能であれば、ブラウザーでローテーションすることを強く望んでいます。

何か案は？

ありがとう！

編集：Jaapは、コンテナ全体を回転させることを提案しました。これは、サムネイル内にテキストノードがあるという事実がなければ完全に機能しますli。コンテナを回転させると、テキストも回転して表示されます。