自从我添加了 css 过渡（第一个是悬停，第二个是动画）以来，它似乎弄乱了我的字体，它们看起来"不同"。
这完全是奇怪的，我已经找了几个小时，找不到任何东西，也不知道它为什么会发生。
在火狐中似乎还可以，但是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);
}
}
我遇到了类似的问题，为我解决它的方法是添加
-webkit-font-smoothing: antialiased;
到我的身体CSS。当任何类型的动画发生时，webkit 会尝试对文本进行抗锯齿以帮助动画，因此将其添加到开头可以防止它发生变化或看起来不同。
我有同样的问题。 执行 Webkit 过渡 一些锚文本变得抗锯齿。经过多次尝试，我发现这种情况只发生在定位并具有 Z 索引的元素中，内部其他元素也定位了 Z 索引。
#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);
}
我在 Chrome for OSX 中遇到了这个问题。 使用-webkit-backface-visibility: hidden;解决了问题。
我已经多次遇到这个问题，并成功地将以下 css 添加到动画元素中：
z-index: 60000;
position: relative;
似乎它需要 z 指数和位置才能有效。就我而言，我将其与字体真棒动画微调器一起使用。
你看到的是 webkit 对你的文本进行抗锯齿，因为它将其视为纹理而不是矢量。除了不使用转换或使用文本替换来提供图像而不是您的类型之外，您无能为力。
有一些关于 webkit 别名的相关线程，但我个人并没有太多运气将类型保留为类型，并且仍然使用转换。
我不完全确定它发生的原因，但看起来当你的.geartwo元素（100px x 100px）与文本重叠时，它似乎减轻了它。当它滚落时，它会恢复正常。我也只在 webkit 浏览器中注意到这一点。
要修复它，您可以将齿轮width和height设置为40px（无论如何，这是图像的大小 - 我认为它不需要是100px x 100px），然后相应地重新定位它。
编辑：我不确定你是否需要在我的主张之后这样做，但我在经过一些搜索后发现了这个相关的讨论。
，-webkit-font-smoothing: antialiased;适用于桌面Safari。但是在iOS上，您需要使用-webkit-backface-visibility: hidden;来解决此问题。
虽然-webkit-backface-visibility: hidden;是一个部分解决方案;但它确实破坏了文本的显示，特别是如果您启用了平滑/AA。此错误也很讨厌，因为它仅在您使用 transform 属性时才会发生。
经过大约 2 年每隔一个月偶尔访问这个主题，我找到了解决方法。您需要向正在设置动画的 css 元素添加position:relative。不过有一个问题，您需要给它一个大于或低于您看到失真的元素的z-index值。这将 100% 修复它。
由于主题没有"明确"的答案，我希望这个答案可以帮助那些与我在同一条船上多年的人。
对于 iOS8，我成功消除转换闪烁的唯一方法是添加
body * { -webkit-transform: translate3d(0, 0, 0); }
到我的样式表。
您需要做的就是将此 CSS 规则添加到您看到闪烁的任何元素中：
-webkit-transform-style: preserve-3d;
仅此而已。