文字模糊伪元素

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;

到按钮的属性。