文字模糊僞元素

Question

https://jsfiddle.net/at5zr0ye/1/

在我有Chrome上文字模糊麻煩的例子之後。如果我刪除z-index，則文本變得銳利，但動畫時它會在:: after元素下消失。

任何想法？

HTML

<button id="send" type="submit">SUBMIT</button> 

CSS

#send{ 
    z-index: 1; 
    padding: 0px; 
    width: 25%; 
    color: rgba(0, 0, 0, 0.55); 
    text-align: center; 
    overflow: hidden; 
    position: relative; 


    -webkit-transition: .36s cubic-bezier(0.4, 0.0, 1, 1); 
    -moz-transition: .36s cubic-bezier(0.4, 0.0, 1, 1); 
    -ms-transition: .36s cubic-bezier(0.4, 0.0, 1, 1); 
    -o-transition: .36s cubic-bezier(0.4, 0.0, 1, 1); 
    transition: .36s cubic-bezier(0.4, 0.0, 1, 1); 
} 

#send::before{ 
    -webkit-font-smoothing: antialiased; 
    z-index: -1; 
    content: ''; 
    position: absolute; 
    background-color: rgb(113, 113, 113); 

    width: 200%; 
    height: 500%; 
    border-radius: 100%; 

    transform: translate(-120%,20%) translateZ(0); 

    -webkit-transition: .36s cubic-bezier(0.4, 0.0, 1, 1); 
    -moz-transition: .36s cubic-bezier(0.4, 0.0, 1, 1); 
    -ms-transition: .36s cubic-bezier(0.4, 0.0, 1, 1); 
    -o-transition: .36s cubic-bezier(0.4, 0.0, 1, 1); 
    transition: .36s cubic-bezier(0.4, 0.0, 1, 1); 
} 

#send:hover::before{ 
    transform: translate(-45%,-34%) translateZ(0); 
} 

#send:hover{ 
    color: rgb(255, 255, 255); 
    border-color: rgba(223, 244, 245, 0.85); 
} 

Answer 1

編輯： 我誤解了這個問題，但我沒有鉻模糊不清文本的問題。對不起！圖像和文本元素在轉換時會變得柔和，這可能會對您造成這種影響。

---

補充一點：

#send:hover .blur { 
filter: blur(.8px); 
} 

的CSS，這對HTML：

<button id="send" type="submit"><span class="blur">SUBMIT</span></button> 

它爲我，但不能在所有的瀏覽器。

Answer 2

嘗試添加：

-webkit-font-smoothing: antialiased;

到按鈕的屬性。