クロムアニメーションでテキストがぼやける

Question

すべてがFirefoxでうまくいきますが、クロムはアニメーションテキストがぼやけていることを示しています。私は前にここで言及-webkit-font-smoothing: subpixel-antialiased;、-webkit-transform: translate3d(0,0,0);、すべてのようにすべてをした：

Webkit-based blurry/distorted text post-animation via translate3d

が、問題はまだ存在しています。

私は非常に簡単な例を示して、どのように見えるかを示します。この問題を解決するにはどうすればよいですか？

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>

また、このmisrenderingは、多くの場合、表示されCodePen

Answer 1

なぜこの出来事？

@staypuftmanはhereと言いますが、これはバグです。アニメーションが％100に達したら、クロムはアニメーションを解放しないことに気付きました。 Firefoxが正しく動作する理由は、Firefoxが最後にanimation-fill-mode: bothのアニメーションをリリースするからです。 animation-fill-modeがforwardときに最後にアニメーションを解放問題

Chromeに

ソリューション。これは状況を助けることはできません。アニメーションが開始されたときに最終的には最終結果の滞在が必要で元の位置に戻る必要がないためです。

ここでのトリックはanimation-fill-modeを前方にすることです。 ％100とまったく同じクラスを作成します。たとえば、質問サンプルでは、​​comeinの％100の部分は100% {opacity:1;}です。私たちはそれをアニメーションとともに使用します。

これはCSSで面倒かもしれませんが、問題を解決できます。

短所

それは最後に少し遅れやちらつきを持つことができます。ここで

例

あなたはこの単純なトリックが問題を解決することができる方法を見ることができます。https：// jsfiddle

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>

Answer 2

でこの例を見ることができます。 transform: translate3d(0, 0, 0)またはtransform: translateZ(0)とアニメーションの要素を試すことができますが、それは常に動作しません。
-webkit-font-smoothing: antialisedは別のオプションですが、それは私のために働いたことはありません。

Answer 3

これは、現在少なくとも1年間は既知のバグされています：https://bugs.chromium.org/p/chromium/issues/detail?id=521364#c36

ステータスはかかわらず、それに取り組んで開発者のいずれかから有望である：

問題は、私たちが物事をラスターによるものでした要素のローカル空間。 要素に部分変換がある場合は、ラスタライズされた テクスチャが線形リサンプリングを使用して端数 の変換で画面に貼り付けられ、その結果、ぼかしが発生します。

解決策は、物理的な画面 にピクセルで整列された空間内の物をラスターにすることです。すなわちラスタテクスチャの代わりにベクトルグラフィックスコマンドに部分変換を適用することによって達成される。

1. 我々のラスターシステムは、任意の一般的な行列のラスタを可能にする最初の部分：

   修正は二つの部分に来るであろう。この部分はほぼ完了です。私はWIPを持っていますが、それでもまだ にはパフォーマンスの低下を引き起こすバグがあります。数日以内に を完成させることを期待しています。 https://codereview.chromium.org/2075873002/

2. タイル管理で異なるラスタ変換に伴うテクスチャセットを管理できるようにする第2の部分です。私は はもともと一般的な行列のために行っていましたが、タイルが出てきました カバレッジ計算が非常に難しくなりました。私は代わりに 変換と縮尺のみをサポートするより単純なバージョンを行います。私は と推定しています。これはもう一週間の作業が必要です。

Answer 4

あなたがリンクダウンチェックplsは、このリンクにそのアニメーション時間の問題をチェックすることができ

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 0.5s 1; 
 
    -moz-animation: comein 0.5s 1; 
 
    animation: comein 0.5s 1; 
 
    animation-fill-mode: both; 
 
} 
 
@keyframes comein { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    
 
    100% { 
 
    opacity: 1; 
 
    } 
 
} 
 
.out { 
 
    -webkit-animation: goout 0.5s 1; 
 
    -moz-animation: goout 0.5s 1; 
 
    animation: goout 0.5s 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>

http://codepen.io/anon/pen/kkpJaL