在Chrome浏览器中使用图片悬停的问题

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网站上找到修复。这是一种骇人听闻，但似乎工作。关键是在缩放的同时添加一点旋转角度。

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