Chrome中图像悬停时出现Stange问​​题

Question

I have an html/css site that uses an effect to magnify images when you hover over them. It works fine, but when using Chrome, it causes the images to jitter and resize on page load. It doesn't seem to do this in other browsers, and doesn't do it in the Dreamweaver browser test, either. If I remove the effect the page loads fine. Any ideas what could cause this?

Here's a link to the page: http://carissalyn.com/Landing.html

Here is the html for the images:

<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>

and here is the css for the hover:

.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

I was having a similar issue. Found a fix on this site. It's sort of hackish but seems to work. The key is to add a tiny bit of rotation along with the zoom.

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