問題タブ [webkit-transform]

2 つの半透明の背景を持つ div のアニメーションがあります。

コンマに気づきましたか？使ってるからだよ

どちらのファイルにもアルファ チャネルが含まれています。

ここで、iPhone でこのコードを高速化したいと思います。だから、私はCPUローダーbackground-positionを次のものに置き換えました-webkit-transform: translate():

まったく機能しません。しかし、コンマを削除すると、両方の bkg レイヤーが同期して移動します (最初のtranslate()作品のみのようです)が、はるかにスムーズになります。実際、速度差が大きすぎて元には戻れませんbackground-image。

divs: #animatedBkg1とを 2 つにする以外に他のオプションはあります#animatedBkg2か?

よろしく、

100％幅のdivをズームアウトすることに興味があります。私が抱えている問題は、要素をスケールアウトすると、固定幅になり、幅の100％に拡張されなくなることです。

例-http://jsfiddle.net/Fz7qh/2/

（transform：scaleではなく）CSSのzoomプロパティを使用すると、期待どおりに機能しますが、zoomプロパティが十分にサポートされていないと聞きました。私の質問は、これはCSS変換スケールで達成できるかということです。

次のコードを使用して、jQuery を介して div (タグ) を回転させようとしています。

しかし、表示に問題があり、完全には表示されません。jsfiddle のコードは次のとおりです: http://jsfiddle.net/4CgPD/

この問題は、記事を jQuery でローテーションしようとした場合にのみ発生します。-webkit-transform..rotate... を使用して css クラスを割り当てると、正常に動作します。

問題は chrome で発生し、Firefox では問題なく動作しています。

私は次のHTML構造を持っています

そして、それに適用される次のCSS：

CSS3アニメーションを使用して、非常に大きなsvgグラフィックをパン/ズームしたいと思います。それは働いています...一種です。iPadで、translate3dのy値を16500px未満に設定すると、グラフィックが表示されなくなるという問題を発見しました（SafariまたはChromeでは完全に正常に機能します）。モバイルSafariでのSVGのレンダリングの高さ/幅には制限があるかもしれないと思いましたが、＃graphicコンテナーからoverflow：hiddenを削除すると、一番下までスクロールして、すべてが正しく表示されます。

誰かが同様の制限を聞いた、または経験したことがあります/この全体が機能すると考えるために設定する必要のあるCSS値はありますか？どんな助けでも大歓迎です。

まず、この素晴らしい3Dキューブのコードをhttp://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/から入手しました。

私がやろうとしているのは、ホバー状態の各面にいくつかのdivを追加することです。これまでのところ、ほとんどの部分で機能しているようですが、特定の回転状態により、Chromeではホバー状態が失敗します（Mozillaでは正常に機能します）。これが私がこれまでに持っているものです：http：//jsfiddle.net/BUbeQ/1/

問題を再現するための最も簡単な矢印キーのアクション：右下または左下-左（注：最初に結果ウィンドウ内の任意の場所をクリックしてください。クリックしないと、矢印キーが機能しません）

ホバー状態を常に機能させる方法についてのヘルプは大歓迎です。

乾杯

こんにちは私は使用しているフルスクリーンスライダー、RoyalSliderを持っています。私はいくつかの画像を含むページを持っています。私が起こそうとしているのは、フルスクリーンボタンをクリックすると、フルスクリーンdivがページ全体をカバーする上から下にスライドし、スライダーがJqueryを介してそのdivに読み込まれることです。

これが私がこれを達成しようとしていた方法です。私は2つのクラスを作ったdivを持っていました：

私はクラスを交換し、Webkitトランジションでアニメーション化を実行したいと思っていましたが、これはまったく機能しませんでした。何らかの理由で、上から下にスライドしてページ全体をカバーするのではなく、divが画面の高さの約1つ下に移動したところまでページを上にスクロールするだけですが、ページ全体をカバーするわけではありません。

http://www.klossal.com/portfolio/index_current_alt.html そこに行って親指までスクロールすると、「もう少し情報」というタイトルのボックスのすぐ上で、親指の横にあるフルスクリーンボタンをクリックして、失敗するのを見ることができます。住む。それが私が最初に助けを必要とすることです。

スライダーをロードする2番目の部分最初の部分が失敗したため、まだ試していませんが、このhtmlドキュメントhttp://www.klossal.com/portfolio/space_fullscreen.html からそのdivにスライダーをロードするつもりでしたこのjqueryを使用して下にスライドします。

これは私のサイトの別の場所に設定されているのでうまくいくと思います、そしてそれはうまくいきます、しかし私は試していません、私がうまくいかないと思う唯一のことはそれがアニメーションが終了する前にロードされることですそれは素晴らしいですそれがそのアニメーションコンテナ内にとどまり、自動的にフルスクリーンにならない限り。この読み込み方法で実際に抱えていたもう1つの問題は、loading.gifが表示される場所を制御することでした。それを制御する方法はありますか？理想的には読み込み領域の中心にしますか？

そこにはたくさんのものがありますが、私はそれがほぼ機能していると思いますか？これに関するどんな助けも素晴らしいでしょう、ありがとう。

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

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

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

CSS3 2D Transforms を Android 2.3 で、デフォルトの Webkit エンジンを使用するブラウザー (デフォルトのブラウザー、Dolphin HD、Amazon Kindle Fire Silk ブラウザーなど) で動作させるのに問題があります。Android 2.3 Webkit エンジンは 2D 変換をサポートしており、2D 変換を使用していくつかのサイトを正しくレンダリングすることができましたが、私のサイトだけではありません!

2D 変換と競合する可能性のある Android 2.3 の問題を知っている人はいますか? または、Android 2.3 webkit レンダリング エンジンを使用して、ブラウザーの css をターゲットにする良い方法はありますか? 私は Modernizr を使用していますが、Android 2.3 ブラウザーのテストで 2D 変換が陽性であるため、このコンテキストでは機能しません。

これが私のサイトです: http://StevenGerner.com . フロント ページで、2 つの要素 (サイト タイトルと h2 要素) を -90 度回転させていますが、どちらも Android 2.3 ブラウザーでは回転しません。他の CSS 変換も試しましたが、何も変換されないようです。ページ全体を基本的なものだけに取り除いた場合、変換は問題なく機能するため、おそらく私のサイトには他の競合があり、何が原因なのかわかりません! 変換に固有の CSS は次のとおりです。

この問題は Android 2.2 にも当てはまる可能性があります。ただし、現在、テストする 2.2 デバイスはありません。

ご意見、ご提案、アドバイスをいただければ幸いです。これは私を夢中にさせています！

私は携帯電話用のWebアプリに取り組んでいます。アプリは複数のスライド パネル (水平) で構成され、各パネルにはクリック可能な要素があります。touchstart、touchmove、touchend イベントを使用してタッチ イベントをキャプチャし、「-webkit-transform: translate3d」を使用して実際に要素を移動しています (水平スワイプに Brad Birdsall の swipe.js を使用 - https://github.com/bradbirdsall/Swipe）。また、フロント パネルにフェード スライドショーを追加しました。css を使用してスライドおよびフェードインおよびフェードアウトするアニメーション化された画像:

これらの効果をいくつか追加した後、アプリは 50% 以上の確率で正しく読み込まれなくなりました。ブラウザーが読み込まれると、画面上のさまざまな場所でランダムな黒い四角形が点滅します (いくつかの例については、添付のスクリーンショットを参照してください)。数秒間点滅して消えることもありますが、動き続けることもあり、すべてのアニメーションが非常に遅くなり、ぎくしゃくします。

これが私が見ているもののサンプルスクリーンショットです。正方形は画面上を動き続けます。

この問題は、実際には、デフォルトの Android ブラウザー (Chrome は完全に正常に動作しますが、デフォルトのブラウザーで動作する必要があります) の samsung galaxy Android フォンでのみ発生します。すべてが iPhone で完全に動作し、これまでにテストした他のすべての Android でも問題なく動作します。サムスンでは、すべてが正しく読み込まれることがありますが、ほとんどの場合はそうではありません。いくつかのアニメーションを削除しようとしましたが、問題は非常に一貫性がありません。コードを変更せずに更新を続けると、ある時点で必ず表示されます。

誰かが以前にこの問題を抱えていましたか? スライド パネルが 2 つだけで、フロント パネルにスライドショーがあるシンプルなバージョンのアプリを作成しました。コードは github にあります: https://github.com/mashabelyi/css-transitions-test。携帯電話で www.webitap.com/test からアプリにアクセスできます。

この単純化されたバージョンでは、黒い四角形があまり表示されません。これは、読み込まれているコンテンツの量と関係があると思われます。最初に表示され、その後消えることもあります。アプリがどの画面サイズにも合うように、要素に対して多くの JavaScript DOM 操作を行っています。これが問題の潜在的な原因になる可能性はありますか? translate3d の代わりに translateX を使用し、translate3d(0,0,0) を呼び出してハードウェア アクセラレーションを 1 回トリガーしようとしましたが、問題は解決しません。

どんな洞察も大歓迎です！

翻訳された垂直スクロール div のテキスト入力に問題があります。

Webkit ブラウザーで、次の単純化された例を表示します。

http://jsfiddle.net/ZbguJ/3/

div の一番下までスクロールし、テキスト ボックスをクリックして、キーボード ボタンを押します。div は上にスクロールして戻り、フォーカスされた入力は表示されません。予期される動作は、div がスクロールしないこと、およびユーザーが妨げられずにテキストを入力し続けることができることです。

ブラウザが、翻訳を考慮せずに div のスクロール先を決定しているようです。

可能な回避策はありますか？

実際のアプリケーションでは、問題の要素は translate を使用して画面上でアニメーション化します。'top' プロパティで変換を CSS アニメーションに置き換えると、アニメーションの滑らかさに深刻な影響がありますが、スクロールの問題は解決します。