奇怪的藍色和橙色邊緣上的CSS動畫字體

我看到一些奇怪的行爲在使用CSS3動畫的一個完整的酒吧符號。在某些瀏覽器中，該符號沿着其兩側形成藍色和橙色邊緣。一直無法弄清楚爲什麼。奇怪的藍色和橙色邊緣上的CSS動畫字體

CSS：

/* blink cursor*/ 
span#textblink { 
color: #fff; 
font-family: "Lucida Console"; 
animation: colorPulse 0.2s infinite alternate; 
-moz-animation: colorPulse 0.2s infinite alternate; 
-webkit-animation: colorPulse 0.2s infinite alternate; 
-o-animation: colorPulse 0.2s infinite alternate; 
}

HTML：

<div id="linkbg"> 
<a href="developers.html" id="dev-link">DreaMLer::Wanted.developers()</a> 
<span id="textblink">█</span> 
</div>

示例頁面：Dreamler.se - 效果似乎在發展的時間很短。

來源

2012-12-06 twingate

和這些「一些瀏覽器」將是......？不知何故，我不認爲山貓或「telnet端口80」會受到影響... –

與safari 6.0.2和ff 17.0.1測試 - 沒有問題 –

沒有完成詳盡的測試。 Windows版本中出現問題： Chrome 22.0.1229.26 Safari 5.1.7 – twingate

哦諷刺。

這對我來說確實看起來像是一個瀏覽器錯誤。我能夠在Chrome 23.0.1271.95 m中偶爾重現它。它看起來像是一個問題，性格非常輕微地溢出預期區域，外部區域未被正確重新繪製。正方形左邊的藍色是最有意義的，當您突出顯示文本，然後清除突出顯示（藍色）時，左側會留下1px藍色線條。另請注意，當您突出顯示單個矩形字符時，突出顯示在左側和右側會丟失大約1px。

有一兩件事我想是添加1px的黑色邊框圍繞文本：

span#textblink { 
    color: #FFF; 
    animation: colorPulse 0.2s infinite alternate; 
    -moz-animation: colorPulse 0.2s infinite alternate; 
    -webkit-animation: colorPulse 0.2s infinite alternate; 
    -o-animation: colorPulse 0.2s infinite alternate; 

    border: 1px solid black; 
}

這似乎解決了這個問題，但是就像我們已經看到，這個問題是零星的，所以它可能剛剛避開了我的測試。

否則，你可能堅持的三個選項之一：

尋找另一個角色（可能使用不同的字體），這是略小
使用jQuery動畫人物
如果所有否則會失敗，使用gif。

來源

2012-12-06 20:51:13 Godwin

感謝您分析問題。這是有道理的 - 我能夠在safari和Chrome中重現這一點，所以可能是webkit問題。已經向Google和Apple報告過，並會按照您對解決方案的建議。 – twingate

奇怪的藍色和橙色邊緣上的CSS動畫字體

回答

相關問題