0

画像用の Firefox の moz-transition に問題があります。

.view-tenth img {
   -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);
   -webkit-transition: all 0.7s ease-in-out 0s;
   -moz-transition: all 0.7s ease-in-out 0s;
   -o-transition: all 0.7s ease-in-out 0s;
   -ms-transition: all 0.7s ease-in-out 0s;
   transition: all 0.7s ease-in-out 0s;
}

ページが読み込まれると、すべての画像がほとんど見えなくなり (不透明度は約 0.1 または 0.3 のように見えます)、その後不透明度が約 0.8 になり、1.0 になることはありません。一度に 1 つまたは 2 つの画像が読み込まれる場合があります。別のページに移動してから前に戻ると、すべての画像がうまく読み込まれます。このバグには、キャッシュの同期が伴うと思います。

画像の「プリロード」スクリプトも使用していますが、このスクリプトをオフにしても問題は解決しません。

遷移時間を 2 秒に設定すると問題が解消されることに気付きましたが、これは適切な判断ではありません。

この問題を解決するにはどうすればよいですか?

追加した:

.view-tenth:hover img {
   -webkit-transform: scale(2);
   -moz-transform: scale(2);
   -o-transform: scale(2);
   -ms-transform: scale(2);
   transform: scale(2);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=1)";
   filter: alpha(opacity=1);
   opacity: 1;
}

マウスが画像上にあるとき、画像を 1 から 2 にスケーリングし、非表示の div の前にもスケールで表示します。scale 属性のみを使用する場合、すべての要素に対して transition を呼び出す必要はないのでしょうか? 私が書かなければならないこと:

-moz-transition: **scaleY** 0.7s ease-in-out 0s;

しかし、それは何の効果もありません。

4

0 に答える 0