CSS3変換により画面のちらつきやエイリアスフォントが発生する

Question

要素にCSS3変換を適用しようとしていますが、2つの問題があります。 ウェブページにはたくさんの付箋が含まれています。JavaScriptを使ってCSSクラスを適用することで、クリック（拡大縮小）または拡大縮小（回転回転）したいと思います。私は:hoverにrotateY(180deg)を使用するフリップ効果については

.postit-container.enabled { 
    z-index: 15; 
    -webkit-transition: -webkit-transform 0.15s ease-in-out; 
    -moz-transition: -moz-transform 0.15s ease-in-out; 
    -o-transition: -o-transform 0.15s ease-in-out; 
    -ms-transition: -ms-transform 0.15s ease-in-out; 
    transition: transform 0.15s ease-in-out; 
    -webkit-transform: scale(1.25); 
    -moz-transform: scale(1.25); 
    -o-transform: scale(1.25); 
    -ms-transform: scale(1.25); 
    transform: scale(1.25); 
} 

：たとえば

ズームクラスは、このようなものです。

すべての付箋のデフォルト回転は6degで、異なる回転を適用するにはnth-child CSS3セレクタでランダム回転を偽装しています。

とのフォントがページ上の一部のフォントが変更されていて、それらがすべてではないが変わったように見える場合、画面がランダムにちらつくという問題があります。あなたは、問題を自分で見ることができるようにここで

はjsfiddleです：

JSfiddleをする（Mac OS X 10.6.8上でGoogle Chromeの12.0.742.122でテスト済み）

私はすでに、ちらつきを-webkit-backface-visibilityトリックを試してみましたすべての時間しかし、フォントは醜い見えるのためにaminationと変形に行っている。

私は本当にこの動作を理解していないので、誰かが魔法のトリックを持っていることを願っています。

Answer 1

jsfiddleにサンプルを置くことができますが、スクリーンショットは問題を説明するうまく機能しません。

私は同様の問題を経験していますが、問題の原因も見つけられませんでした。あるいは何が起きているのかを説明してください。

しかし、私のケースではうまくいきました。

-webkit-transform-style: preserve-3d; 

レンダリングの問題があると思われるすべての要素に適用しました。私の場合、移行されていない場所や同じコンテナ内であっても、一見無作為かつ一貫性のない方法で影響を受ける要素があります。

のようなものです。

.header *, .sticky * { 
    -webkit-transform-style: preserve-3d; 
} 

私はpreserve-3dが何をしているかについて説明したいと思いますが、ドキュメントがかなりあいまいであることがわかりました。私が集められたものの核心について

は、それが問題を解決することである（それがなかったもの）と、それがデフォルトで使用された二つの性質

-webkit-transform-style: preserve-3d; 
//and 
-webkit-transform-style: flat; 

フラットを持っています。

申し訳ありませんもっと詳細な回答はできませんでしたが、これで問題が解決されることを願っています。

WebKitで作業している人がいれば、これが実際に何をしているかについて説明してください。

Answer 2

は、あなたのCSSに以下を追加してください：クロムは、多くの場合、私はあなたのテキストだけである参照CSS

Answer 3

に基づいて、それを使用しないことを決定したので、

-webkit-transform: translateZ(0); 

これは、クロームのハードウェアアクセラレーションを強制しますアンチエイリアス。たとえば、rotateZ(0)のような3d変換を追加して修正してください。

Answer 4

私は同じ問題があります。 発見された解決策は非常に長い時間でしたが、最終的に私はそれを見つけました。

サイトの問題オブジェクトにクラス.no-flickrを追加するだけで、バグなく正しいアニメーションが表示されます。

このhttp://jsfiddle.net/DaPsn/92/

.no-flickr {   
    -webkit-transform: translateZ(0); 
    -moz-transform: translateZ(0); 
    -ms-transform: translateZ(0); 
    -o-transform: translateZ(0); 
    transform: translateZ(0); 
}