2012-04-19 13 views
1

私はCSS3トランジションを組み込んだサイトで作業していましたが、ちょっとした障害に陥りました。CSS3不透明遷移問題

適用先の要素にカーソルを置くと、前のdiv内のテキストがぼやけて、移行が完了すると通常に戻ります。 ChromeとSafariでは正常に動作しますが、Firefoxでは問題が発生します。

私はここでの問題を再現しました:http://jsfiddle.net/fkbc6/

の移行は、現在明らかに動作しませんリスト項目に適用されます。私も画像に適用しようとしましたが、無駄です。

私はすべてのアイデアがないので、どんな助力も大変ありがとうございます。

答えて

1

http://jsfiddle.net/fkbc6/2/

間違いはスタイルが(2回ところで、CSSに適用するので、あなたが適用されたCSSは0.5ネガティブ度の変換(何purpouse?)とFirefoxが再奇妙な方法で、すべてのフォントをレンダリングしていたました)例の一番上のdivに

#wepartner { 
    overflow:auto; 
    margin:70px auto 70px auto; 
    padding-top:80px; 
    background:#F6F6F6; 
    background:rgba(0,0,0,0.02); 
    padding:80px 50px 50px 50px; 
    -moz-transform:rotate(0.5deg); 
    -webkit-transform:rotate(0.5deg); 
    -o-transform:rotate(0.5deg); 
    -ms-transform:rotate(0.5deg); 
    transform:rotate(0.5deg) 
} 
#wepartner .content { 
    -moz-transform:rotate(-0.5deg); 
    -webkit-transform:rotate(-0.5deg); 
    -o-transform:rotate(-0.5deg); 
    -ms-transform:rotate(-0.5deg); 
    transform:rotate(-0.5deg) 
} 

は、一度すべてがうまく

EDIT動作するはずです削除されました:うわー、実際には次の2つを適用したが同じ値と異なる方向での回転は、Ctrl-CはCtrl-Vには注意してください:P

EDIT 2:このリンクはあなたの助けのためのhttp://petermolnar.eu/linux-tech-coding/ie8-css-filter-matrix-cleartype-font-bug-fix/

+0

ねえデビッド、歓声を助けることができる可能性があります。ポジティブローテーションは、単にスタイルの目的で親div(#wepartner)に適用されました。子div(.content)の負の回転は、ギザギザのアーティファクト(元の回転の間に起こった)を打ち消し、テキストとイメージを元の向きに戻すことでした。私はこれが問題を解決するのを見ますが、これらの問題がなければディビジョンのローテーションを維持するためにとにかくありますか? – carlh

+0

要素にCSSを適用する場合は、その要素をその子要素にも適用します。 私は0degを.contentトランスフォームに適用しようとしました。なぜなら、負のものはコンバートせず、まっすぐなdivに負のローテーションを追加するように動作するからです。また、変換にnone値を設定しようとしましたが、どちらも機能しません。さらに詳しい情報:https://developer.mozilla.org/ja/CSS/transform 私の回答を編集したばかりです。 http://petermolnar.eu/linux-tech-coding/ie8-css-filter -matrix-cleartype-font-bug-fix/ –

+0

Davidさんのリンクありがとうございます。私はまだそれを働かせることができない恐れがあります。親には1つの変換が追加され、子には1つの変換があっても、ホバー中にレンダリングの問題が発生するようです。これはおそらくブラウザのバグでしょうか、それとも私のCSSに何か原因がありますか? – carlh

関連する問題