CSS3过渡搞乱webkit中的字体？

自从我添加了一个css过渡（第一个是悬停，第二个是动画），它似乎弄乱了我的字体，他们看起来'不同'。CSS3过渡搞乱webkit中的字体？

这是完全离奇，我已经看了几个小时，无法找到任何东西，也不是我能弄清楚到底为什么发生。

这似乎是在Firefox不错，但Safari和Chrome上有问题。

http://www.simplerweb.co.uk

一切都在底部左边的挡下面的动画似乎看起来像一个打火机字体粗细和导航菜单似乎看起来是一样的。

我完全失去了在这一个。

这里是动画的CSS。

.gearone {height:100px; 
width:100px; 
top:-10px; 
left:-10px; 
position:absolute; 
background-position:center; 
background-repeat:no-repeat; 
background-image:url(../images/gearone.png); 
-webkit-animation-name:    backrotate; 
    -webkit-animation-duration:  13s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-transition-timing-function:linear; 


-moz-animation-name: backrotate; 
    -moz-animation-duration: 13s; 
     -moz-animation-timing-function: linear; 
    -moz-animation-iteration-count: infinite; 
} 

.geartwo {height:100px; 
width:100px; 
position:absolute; 
background-position:center; 
background-repeat:no-repeat; 
background-image:url(../images/gearone.png); 
top:20px; 
left:10px; 

-webkit-animation-name:    rotate; 
    -webkit-animation-duration:   13s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-transition-timing-function:linear; 


    -moz-animation-name: rotate; 
    -moz-animation-duration: 13s; 
     -moz-animation-timing-function:linear; 
    -moz-animation-iteration-count: infinite; 

} 


@-webkit-keyframes rotate { 
    from { 
    -webkit-transform: rotate(0deg); 

    } 
    to { 
    -webkit-transform: rotate(360deg); 

    } 
} 

@-moz-keyframes rotate { 
from { 

    -moz-transform: rotate(0deg); 
    } 
    to { 

    -moz-transform: rotate(360deg); 
    } 
} 



@-webkit-keyframes backrotate { 
    0% { 

     -webkit-transform: rotate(360deg); 
    } 
    100% { 

     -webkit-transform: rotate(0deg); 
    } 
} 
@-moz-keyframes backrotate { 
    0% { 
     -moz-transform: rotate(360deg); 

    } 
    100% { 
     -moz-transform: rotate(0deg); 

    } 
}

来源

2012-04-18 andy

没有人有任何想法？ – andy 2012-04-18 23:53:10

，你看到的是WebKit的抗混叠的文字，因为它是把它当作而不是一个矢量纹理。除了不使用转换，或者使用文本替换来提供图片而不是使用类型外，没有什么可以做的了。

关于webkit别名有一个few related threads，但我没有亲自将类型保存为类型，仍然使用转换。

来源

2012-04-19 02:06:27 djlumley

旁注：兼容，不兼容:) – djlumley 2012-04-19 02:08:46

我通过添加-webkit-font-smoothing：subpixel-antialiased;给有问题的任何人的父母。 – andy 2012-04-19 11:35:05

我不能完全肯定的原因为什么它的发生，但它看起来像当你.geartwo元（100像素X 100像素）重叠的文字，似乎减轻了。当它脱落时，它恢复正常。我也只是在webkit浏览器中注意到这一点。

要解决它，你可以设置齿轮width和height到40px（这是图像的大小呢 - 我不认为有必要为它是100像素X 100像素），然后重新定位它因此。

编辑：我不知道，你需要我的建议后，要做到这一点，但我有点搜索后发现this related discussion。

来源

2012-04-19 01:24:47 chrisn

+1注意齿轮。在这种情况下，重叠可能是导致字体反锯齿的原因。 – djlumley 2012-04-19 02:10:50

我有同样的问题。如果执行webkit过渡，某些锚文本会变得反锯齿。经过多次尝试后，我发现这只发生在定位的元素中，并且z-index与其他元素一起定位并与z-index一起定位。

#footer { 
    bottom: 0; 
    left: 330px; 
    right: 100px; 
    height: 75px; 
    background-color: #231f20; 
    min-width: 540px; 
    min-height: 75px; 
    position: fixed; 
    z-index: 10; 
}

页脚里面我有

#cityNav > ul > li a { 
      font-size: 24px; 
      text-transform: uppercase; 
      position: relative; 
      z-index: 110; 
      line-height: 24px; 
      height: 24px; 
      display: block; 
     }

，这是我的过渡

.circle { 
     position: absolute; 
     top: 0; 
     left: 0; 
     display: block; 
     background-color: #ff0000; 
     width: 20px; 
     height: 20px; 
     cursor: pointer; 
     text-indent: -999em; 
     -webkit-border-radius: 50%; 
     -moz-border-radius: 50%; 
     -o-border-radius: 50%; 
     border-radius: 50%; 
     -webkit-transition: all .2s ease-out; 
     -moz-transition: all .2s ease-out; 
     -o-transition: all .2s ease-out; 
     transition: all .2s ease-out; 
    } 
    .circle:hover { 
     -webkit-transform: scale(2); 
     -moz-transform: scale(2); 
     -o-transform: scale(2); 
     transform: scale(2); 
    }

来源

2012-10-30 12:36:01 ganchan

我想我也有类似的问题，什么固定对我来说是增加