Question

我在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。一个或两个图像可以一次加载，位其他...它只在第一页加载时发生。当我转到另一页然后回到之前所有图像加载良好。我认为这个错误伴随着一些兑现同步。

我还为图像使用“预加载”脚本，但是当我关闭此脚本时，问题仍然存在。

我注意到当我设置转换持续时间2s时问题就消失了，但这不是一个很好的决定，粗略。

如何解决此问题？

添加了：

.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属性，也许我不需要为所有元素调用转换？我要写的是：

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

但它没有任何效果。

Firefox bug中的CSS转换

0 个答案: