html - 图像悬停在 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

我遇到了类似的问题。在此站点上找到了修复程序。这有点骇人听闻，但似乎有效。关键是在缩放的同时添加一点点旋转。

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