Firefox 3.6上的CSS3转换是否稳定？

Question

我实现了图像的CSS3变换，我可以对其进行缩放和翻译。当我将鼠标悬停在图像上进行变换时，生成的图像有时会闪烁或不出现。我必须将鼠标移动一点才能让它坚持下去。我的代码或Firefox 3.6中的实现是一个问题吗？

HTML：

<a class="image-transform" href="#" title="William and Catherine"><img src="images/William_Walter_and_Catherine_Rowe.jpg" alt="William Walter and Catherine Rowe"/></a>

的CSS：

.image-transform img
{
    float:right;
    width: 75px;
    background-color: #ffffff;
    margin: 1em 1em 1em 1em;
    padding: 3px;
    border: solid 1px;
    -moz-box-shadow: 5px 5px 5px #888;
    -o-box-shadow: 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px #888;
    box-shadow: 5px 5px 5px #888;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.image-transform:hover img 
{
/*  width: 300px;*/
    -moz-transform: scale(4) translate(-60px);
    -webkit-transform: scale(4) translate(-60px);
    -o-transform: scale(4) translate(-60px);
    transform: scale(4) translate(-60px);
}

此生产页面位于：http://www.amcolan.info/Rowe/rowe.php。这是右边缘唯一的小照片。我在另一个运行良好的页面上使用了javascript解决方案，但我想我会尝试一下CSS3。

感谢您的帮助。

Answer 1

原因很简单。看看这张图片：

请注意，当您将鼠标悬停在元素上时，:hover选择器会生效，并会展开和翻译，从而远离鼠标。现在，鼠标下的元素不，:hover选择器将不会生效，并且元素会在鼠标下移回原始位置。然后循环重复。

现在，Firefox 3.6不支持CSS转换，因此这会立即发生，或者与浏览器重绘屏幕一样快，因此它似乎“闪烁”或“闪烁”。

解决方案是确保在动画的所有部分期间元素始终位于鼠标下方，或者使用JavaScript，您可以使用JavaScript从中获取对动画的更精细控制。