Chrome动画使文字模糊 [英] Chrome animation makes text blurry
问题描述
在Firefox上一切正常，但chrome显示动画文本模糊。我做了一切像 但问题仍然存在。 我做了一个非常简单的例子来向你展示它的外观。如何解决这个问题？ -webkit-font-smoothing：subpixel-antialiased; ， -webkit-transform：translate3d（0,0,0）; 以及之前提到的所有内容：
var text = 1; function next ）{var next =（text == 2）？ 1：2; document.getElementById（'text'+ text）.className ='out'; document.getElementById（'text'+ next）.className ='in'; text = next;} body {padding：0;保证金：0; font-family：tahoma; font-size：8pt; color：black;} div {height：30px;宽度：100％;位置：相对;溢出：隐藏; margin-bottom：10px;} div div {opacity：0;位置：绝对; top：0;底部：0;正确：0; left：0;}。in {-webkit-animation：comein 1s 1; -moz-animation：comein 1s 1;动画：comein 1s 1; animation-fill-mode：both;} @keyframes comein {0％{opacity：0; } 100％{不透明度：1; }}。out {-webkit-animation：goout 1s 1; -moz-animation：goout 1s 1;动画：出场1s 1; animation-fill-mode：both;} @keyframes goout {0％{opacity：1; } 100％{不透明度：0; }} < div> < div class =inid =text1>您好！我是测试文本。我是Test Text jr Father！< / div> < div id =text2>我是测试文本jr。我天生就是个犀利而美丽的人，但当我进来时，Chrome让我变得模糊，我很糟糕，我很糟糕！ ...< / div>< button onclick =next（）;> Next< / button>
/ strong>
正如@staypuftman在这里中提到的，这是一个错误。但是我注意到动画到达％100时，chrome不会释放动画。 Firefox正确行事的原因是Firefox在最后发布了动画，甚至在 animation-fill-mode：中。
解决问题的方法
当转发。这无法帮助这种情况。因为最终我们需要最终的结果，而不是在动画开始时回到原始点。
这里的技巧是使 animation-fill -mode 转发。并像％100一样创建一个类。例如，在问题示例中， comein 的％100部分是 100％{opacity：1;} 。我们在动画中使用它。
这可能对css很混乱，但它可以解决问题。
缺点
最后可能会有一点滞后或闪烁。
示例
在这里您可以看到这个简单的技巧如何解决这个问题：
<
var text = 1; function next（）{var next =（text == 2）？ 1：2; document.getElementById（'text'+ text）.className ='out'; document.getElementById（'text'+ next）.className ='in show'; text = next;}
body {padding：0;保证金：0; font-family：tahoma; font-size：8pt; color：black;} div {height：30px;宽度：100％;位置：相对;溢出：隐藏; margin-bottom：10px;} div div {opacity：0;位置：绝对; top：0;底部：0;正确：0; left：0;}。in {-webkit-animation：comein 1s 1; -moz-animation：comein 1s 1;动画：comein 1s 1; animation-fill-mode：forward;} @ keyframes comein {0％{opacity：0; } 100％{不透明度：1; }}。out {-webkit-animation：goout 1s 1; -moz-animation：goout 1s 1;动画：出场1s 1; animation-fill-mode：both;} @keyframes goout {0％{opacity：1; } 100％{不透明度：0; }}。show {opacity：1; / *完全像comein的100％* /}
< ; DIV> < div class =in showid =text1>您好！我是测试文本。我是Test Text jr Father！< / div> < div id =text2>我是测试文本jr。我天生就是个犀利而美丽的人，但当我进来时，Chrome让我变得模糊，我很糟糕，我很糟糕！ ...< / div>< button onclick =next（）;> Next< / button>
Everything works good on Firefox but chrome shows the animated text blurry. I did everything like -webkit-font-smoothing: subpixel-antialiased; , -webkit-transform: translate3d(0,0,0); and everything mentioned here before:
Webkit-based blurry/distorted text post-animation via translate3d
but the problem is still exists.
I made very simple example to show you how it looks like. How can I fix this problem?
var text = 1;
function next() {
var next = (text == 2) ? 1 : 2;
document.getElementById('text' + text).className = 'out';
document.getElementById('text' + next).className = 'in';
text = next;
}
body {
padding: 0;
margin: 0;
font-family: tahoma;
font-size: 8pt;
color: black;
}
div {
height: 30px;
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 10px;
}
div div {
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.in {
-webkit-animation: comein 1s 1;
-moz-animation: comein 1s 1;
animation: comein 1s 1;
animation-fill-mode: both;
}
@keyframes comein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.out {
-webkit-animation: goout 1s 1;
-moz-animation: goout 1s 1;
animation: goout 1s 1;
animation-fill-mode: both;
}
@keyframes goout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div>
<div class="in" id="text1">Hello! I'm Test Text. I'm Test Text jr Father!</div>
<div id="text2">Hi, I'm test text jr. I'm sharp and beautiful by nature but when I came in, Chrome made me blurry and I'm bad, I'm bad! ... Who's bad :)</div>
</div>
<button onclick="next();">Next</button>
You can also see this example at CodePen
Why this happening?
As @staypuftman mentioned here, this is a bug. but I noticed when animation reached to the %100, chrome don't release the animation. The reason Firefox acting correct is Firefox release the animation at the end, even in animation-fill-mode: both.
Solution to the problem
Chrome releasing the animation at the end when animation-fill-mode is forward. This can not help the situation. because at last we need the end result stay and not back to the original point when animation started.
The trick here is to make animation-fill-mode forward. and make a class exactly like the %100. For example, In the question sample, %100 part for comein is 100% {opacity:1;}. and we use that with animation.
This can be messy on css, but it can solve the problem.
Cons
It can have a little lag or flickering at the end.
Example
Here you can see how this simple trick can solve the problem:
var text = 1;
function next() {
var next = (text == 2) ? 1 : 2;
document.getElementById('text' + text).className = 'out';
document.getElementById('text' + next).className = 'in show';
text = next;
}
body {
padding: 0;
margin: 0;
font-family: tahoma;
font-size: 8pt;
color: black;
}
div {
height: 30px;
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 10px;
}
div div {
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.in {
-webkit-animation: comein 1s 1;
-moz-animation: comein 1s 1;
animation: comein 1s 1;
animation-fill-mode: forward;
}
@keyframes comein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.out {
-webkit-animation: goout 1s 1;
-moz-animation: goout 1s 1;
animation: goout 1s 1;
animation-fill-mode: both;
}
@keyframes goout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.show{
opacity: 1; /*exactly like 100% of comein*/
}
<div>
<div class="in show" id="text1">Hello! I'm Test Text. I'm Test Text jr Father!</div>
<div id="text2">Hi, I'm test text jr. I'm sharp and beautiful by nature but when I came in, Chrome made me blurry and I'm bad, I'm bad! ... Who's bad :)</div>
</div>
<button onclick="next();">Next</button>
这篇关于Chrome动画使文字模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
