图像悬停在Chrome中的Stange问​​题

Question

我有一个html / css网站，当您将鼠标悬停在图片上时，会使用效果放大图像。它工作正常，但使用Chrome时，会导致图像抖动并在页面加载时调整大小。它似乎在其他浏览器中没有这样做，也没有在Dreamweaver浏览器测试中执行此操作。如果我删除效果页面加载正常。有什么想法会导致这种情况吗？

以下是该页面的链接：http://carissalyn.com/Landing.html

以下是图片的html：

<tr>
<td><a href="" class="imghover"><img src="images/leaf.jpg" alt="portrait" class="border"></a></td>
<td><a href="" class="imghover"><img src="images/DSC_2280-Edit-Edit-Final.jpg"  alt="portrait" class="border"></a></td>
<td><a href="" class="imghover"><img src="images/DSC_2685.jpg" alt="blog" class="border"></a></td>
</tr>

这里是悬停的css：

.imghover img{
-webkit-transition-duration: 1s; 
-moz-transition-duration: 1s; 
-o-transition-duration: 1s; 
}
.imghover img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1); 
-o-transform:scale(1.1); 
}

Answer 1

我遇到了类似的问题。在this网站上找到了修复程序。它有点像hackish但似乎有效。关键是在缩放时添加一点点旋转。

.imghover img:hover {
    transform: scale(2) rotate(0.1deg);
}