Chrome動畫使文本模糊

Question

在Firefox上一切正常，但chrome顯示動畫文本模糊。我所做的一切都像-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>

你也可以看到在CodePen

Answer 1

爲什麼會這樣呢？

As @staypuftman提到here，這是一個錯誤。但是我注意到動畫到達％100時，chrome不會釋放動畫。 Firefox正確行事的原因是Firefox在最後發佈動畫，即使在animation-fill-mode: both。

用於解決問題

鉻釋放在結束動畫時animation-fill-mode是forward。這無法幫助這種情況。因爲最終我們需要最終結果停留，而不是在動畫開始時回到原始點。

這裏的訣竅是讓animation-fill-mode轉發。並像％100一樣創建一個類。例如，在問題示例中，comein的％100部分爲100% {opacity:1;}。我們使用動畫。

這可能是對CSS的混亂，但它可以解決問題。

缺點

它可以有一個小的滯後或在末端閃爍。

例

在這裏，您可以看到這簡單的一招是如何解決這個問題：HTTPS：

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

這misrendering經常出現這樣的例子。 你可以嘗試transform: translate3d(0, 0, 0)或transform: translateZ(0)和動畫的元素，但它並不總是工作。
-webkit-font-smoothing: antialised是另一種選擇，但從來沒有爲我工作。

Answer 3

這是一個已知的錯誤至少有一年了：https://bugs.chromium.org/p/chromium/issues/detail?id=521364#c36

狀態從這個工作，雖然開發者的一個承諾：

的問題是由於我們光柵東西一個元素的本地空間。 如果元素具有小數平移，那麼將使用線性重採樣將光柵化的紋理粘貼到屏幕上，使用小數位數 平移，從而導致模糊。

解決的辦法是在物理屏幕上像素對齊到 的空間中進行光柵掃描。即將分數轉換應用於矢量圖形命令而不是光柵紋理。

的修補程序將分爲兩個部分來：

1. ，使我們的光柵系統，對普通的矩陣柵格中的第一部分。這部分幾乎完成了。我有一個在製品，但它仍然有一個導致性能迴歸的錯誤 。我預計在幾天內完成它 。 https://codereview.chromium.org/2075873002/

2. 第二部分允許我們的平鋪管理能夠管理不同的光柵轉換附帶的一組紋理。 I 最初是用於一般矩陣，但結果是覆蓋計算變得非常困難。我會做一個 更簡單的版本，只支持翻譯和縮放。我估計 這將需要再工作一週。

Answer 4

您可以檢查此鏈接的動畫時間問題請您檢查下行鏈路

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