2016-03-26 4 views
0

私は解決策についてもかなりの質問を見つけましたが、私にとってはうまくいかないようです。スケールアップ後、テキストがぼやけていて、それが定位置に点滅します。レンダリングに何か問題があります。CSS変換でのぼかし&ちらつきの問題

私が使用しようとしている正確な構造を持つフィドルを作成しました。誰かが解決策を持っていれば、私はそれを感謝します。

ここで私が見つけた解決策を試してみましたが、助けてくれなかった、または意図通りに実装できなかったことを強調したいと思います。

FIDDLE:https://jsfiddle.net/1yu9p66L/1/

.box1:hover { 
    -moz-backface-visibility: hidden; 
    -moz-transform: translateZ(0) scale(1.0, 1.0); 
    -moz-transition: all 200ms ease-in; 
    -moz-transform: scale(1.09); 
    -moz-perspective: 1000; 
    -moz-backface-visibility: hidden; 
} 

PS:現在、FF 45.0.1でテスト。

答えて

0

元のボックスに変換を追加して、< 1に拡大縮小し、ホバー状態のトランスフォームを1に変更します。ボックスのサイズを調整する必要があります。例えば.box1へ

これ、:.box1へ

-webkit-transform: scale(.9); 
-ms-transform: scale(.9); 
-moz-transform: scale(.9); 
transform: scale(.9); 

と、この:ありがとう

-webkit-transform: scale(1); 
-ms-transform: scale(1); 
-moz-transform: scale(1); 
transform: scale(1); 

https://jsfiddle.net/1yu9p66L/2/

+0

を合わせます。一見するとうまくいくように見えますが、ちらつきの問題はボックスがスケールアウトするときと逆になります。 これは焦点が合っていないのでもう迷惑なことではありませんが、ライブウェブサイト上に3つのボックスを持ち、偶然、マウスを動かすことで偶然、望ましくない効果が目立ちます。 –

+0

@AndreiP私はちらつきが何を意味しているか正確には分かっていませんが、背景色の変化が原因である可能性があります。 –

+0

アニメーションの終わりに、ボックスがぼやけていて、それが鮮明になり、最終位置にスナップするまで1px上に動いているようです。私は少し研究をして、同じ問題を抱えている人々、この場合はうまくいかない解決策を提供する人々を見た。私はまた、それがdiv内の何かであり、エフェクトと要素を削除したかもしれないと考えましたが、問題は残っていました。 –