왜 이미지를 가져 가면 웹 사이트의 글꼴이 변경됩니까?

Question

마우스를 약간 돌리면 내 웹 사이트의 오른쪽에 3 개의 소셜 미디어 버튼이 있습니다. 그리고 누구든지 그들 위에 올 때마다 웹 사이트의 글꼴을 공중에 올려 놓고 보면서 거의 대담하게 만듭니다. 그것들은이 이미지들에 대해서만 일어나는 일이며 매우 짜증납니다. 왜 이런 일이 일어날 지 추측 할 수 있습니까?

Heres는 각 버튼에 대한 사용하여 HTML/CSS 메신저 :

<div id="socialicon1"><a href="http://facebook.com/sentinelgaming" target="_blank"><img src="http://files.enjin.com/202624/social%20media/facebook%20square.png" width="50" height="50" alt="facebook button"/></a></div> 

#socialicon1 img { 
    position: fixed; 
    top: 350px; 
    right: 13px; 
    -webkit-transition: all 0.5s ease-out; 
    -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; 
    } 

#socialicon1 img:hover { 
    -webkit-transform: rotate(-9deg); 
    -moz-transform: rotate(-9deg); 
    -o-transform: rotate(-9deg); 
} 

그리고 당신은 그것을 좀 걸릴 수 있도록이 웹 사이트 자체이다 : http://www.sentinelgaming.net

덕분에 무리를 사전에!

Answer 1

이것은 웹킷의 알려진 문제입니다. http://css-tricks.com/forums/discussion/18538/transforms-cause-font-smoothing-weirdness-in-webkit/p1