在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); 
}