12

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

这太奇怪了，我找了好几个小时都找不到任何东西，我也不知道为什么会这样。

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

    }
}
4

10 回答 10

19

我想我有一个类似的问题，为我解决的问题是添加

-webkit-font-smoothing: antialiased;

到我的身体 css。当任何类型的动画发生时，webkit 会尝试对文本进行抗锯齿以帮助动画，因此将其添加到开头可以防止它发生变化或看起来不同。

于 2012-12-11T01:37:28.410 回答
5

我有同样的问题。在执行 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-30T12:36:01.873 回答
3

我在 Chrome for OSX 中遇到了这个问题。使用-webkit-backface-visibility: hidden;解决了这个问题。

于 2014-09-16T18:33:57.677 回答
2

我已经多次遇到这个问题，并且成功地将以下 css 添加到动画元素中：

z-index: 60000;
position: relative;

似乎它需要 z-index和position 才能有效。就我而言，我将它与 Font Awesome 动画微调器一起使用。

于 2013-07-29T10:36:31.080 回答
1

What you're seeing is webkit anti-alias your text because it's treating it as a texture as opposed to a vector. There's not much you can do, other than not using transformations, or using an text replacement to provide an image instead of your type.

There's a few related threads regarding webkit aliasing, but I haven't personally had much luck keeping the type as type, and still using transformations.

于 2012-04-19T02:06:27.463 回答
1

我不确定它发生的原因，但看起来当你的.geartwo元素（100px x 100px）与你的文本重叠时，它似乎变亮了。当它滚下来时，它又恢复了正常。我也是，只在 webkit 浏览器中注意到这一点。

要修复它，您可以将齿轮设置为（无论如何width，这就是图像的大小——我认为不需要它为 100 像素 x 100 像素），然后相应地重新定位它。height40px

编辑：我不确定你是否需要在我的提议之后这样做，但经过一番搜索后，我发现了这个相关的讨论。

于 2012-04-19T01:24:47.313 回答
1

如上所述，-webkit-font-smoothing: antialiased;适用于桌面 Safari。但在 iOS 上，您需要使用-webkit-backface-visibility: hidden;才能解决此问题。

于 2014-07-07T13:41:28.340 回答
1

While-webkit-backface-visibility: hidden;是部分解决方案；它真的会破坏文本的显示，特别是如果您启用了平滑/AA。这个错误也很讨厌，因为它只在您使用 transform 属性时才会发生。

在每隔一个月偶尔访问这个主题大约 2 年之后，我找到了一个解决方法。您需要将 a 添加position:relative到正在动画的 css 元素。但是有一个问题，您需要给它一个z-index大于或小于您看到失真的元素的值。这可以 100% 修复它。

由于主题没有“明确”的答案，我希望这个答案能帮助那些多年来与我同舟共济的人。

于 2016-03-03T07:42:51.460 回答
-1

对于 iOS8，我成功消除转换闪烁的唯一方法是添加

body * { -webkit-transform: translate3d(0, 0, 0); }

到我的样式表。

于 2015-01-22T15:36:57.040 回答
-2

您需要做的就是将此 CSS 规则添加到您看到闪烁的任何元素：

 -webkit-transform-style: preserve-3d;

就是这样。

于 2015-10-13T10:44:50.050 回答