問題タブ [css-transforms]

UPDATE: This problem was corrected by updating to the latest fancybox css.

I'm building a portfolio site with thumbnails that enlarge on hover using css transforms/transitions. The problem is, when I am viewing the popup, if I move the mouse the popup image blinks/jumps around the page. Here's the relevant css for the links:

If I just remove "display:block" from the .thumb a styles, Fancybox works fine, but then my transforms don't work at all. Or if I leave "display:block" but remove all of the transition rules from the .thumb a styles, Fancybox works fine, and the thumbnails scale, but without the smooth transition. Is there a way to resolve the conflict, so I can have a stable Fancybox popup as well as smooth thumbnail transitions?

私はCSS変換を実行しています：親で回転しますが、一部の子でこの効果を無効にできるようにしたいです-逆回転を使用せずに可能ですか？

逆回転は機能しますが、要素の位置に影響し、パフォーマンスに悪影響を与える可能性があります（？）。いずれにせよ、それはきれいな解決策のようには見えません。

私はこの質問からの「変換：なし」の提案を試しましたが、子供が変換css3を継承するのを防ぎますが、それは単に機能しません-ここのフィドルを参照してください：http：//jsfiddle.net/NPC42/XSHmJ/

アニメーションが jQuery でアニメーションの 100% に達したことを知る方法はありますか?

編集：@Archerからの回答はこれを修正しているようです。（私にはそれを行うのに十分なポイントがないので、彼に投票してください）。
バグの詳細については、ここをクリックしてください：http ://www.viget.com/inspire/webkit-transform-kill-the-flash/

私の問題を説明するのは簡単ではありません。jsfiddleでテストケースを作成しました。このテキストの下部にリンクがあります。

デモリンクをクリックする前に、次の点に注意してください。

あなたがグーグルクロームを使用していることを確認してください。（CSSの-webkitプレフィックスのため）。

オレンジ色のボタンを初めてクリックするときは注意してください。アニメーションが開始する前に、ある種の短いフラッシュが表示されるはずです。（リセットボタンをクリックした後）再試行すると、すべて問題なく、画面が点滅しません。ただし、ブラウザのキャッシュをクリアし（CTRL-SHIFT-DEL）、ブラウザを閉じてページをリロードすると、問題が再び発生します。
はっきり説明したいと思います。

デモ：http： //jsfiddle.net/NKQNX/14/

（私のスペルは申し訳ありませんが、英語は私の第一言語ではありません）

背面の可視性プロパティに問題があります。Safari/Chrome では希望どおりに動作しますが、何らかの理由で Firefox では正しく動作しません。

箱をひっくり返すと、正面が鏡像になります。

私は両方に変換する2つのミックスインを持っています-webkit-transform:

一緒に使うと：

...それらは（予想どおり）次のように表示されます：

2 番目が 1 番目よりも優先されるため、これは有効な CSS ではないようです。最初のものは破棄されます。エントリを結合transformするには、次のようにする必要があります。

このような CSS を LESS で生成するにはどうすればよいですか。つまり、複数のtransformエントリを正しく組み合わせるにはどうすればよいですか?

<input type="number"/>ブートストラップ 1.4 を使用しているときに、アップ/ダウン スピナーが要素に表示されないという問題に遭遇しました。スピナーはまだそこにあります。表示されていなくても、クリックして数値を増減できます。

以下のCSS宣言に絞り込めたと思います。http://jsfiddle.net/tKTRx/1/を参照してください。

このスタイリングは何をしますか？それを回避する方法はありますか？(ブートストラップの新しいバージョンでは問題にならないようですが、まだアップグレードできません)。

http://2012.beercamp.com/とhttp://acko.net/を除いて、実際に CSS 3D Transforms を使用した例を知っています か?

（正確なカスタムツールチップの配置のために）いくつかの異なる要素の実際の高さを取得する必要があり、これらの要素の一部（すべてではない）が回転します。$（elem）.outerHeight（）は、実際に表示されている高さではなく、元の高さを返します。

これが非常に単純な例のフィドルです：http：//jsfiddle.net/NPC42/nhJHE/

私はこの答えで可能な解決策を見ます：https ：//stackoverflow.com/a/8446228/253974 、しかしそれでももっと簡単な方法があることを望んでいます。

CSS 3D 変換は Mobile Safari でハードウェア アクセラレーションされるとよく​​言われますが、これは 2D 変換がそうではないという意味でしょうか? 基本的にすべて 3D 変換として実装できるため、そうしない理由は思いつきませんが、確実に知りたいと思います。

2D 変換がハードウェア アクセラレーションではないことが判明した場合は、その理由についての洞察をいただければ幸いです。