画像用の 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;
しかし、それは何の効果もありません。