Chrome上带有::after伪元素的模糊文本

Question

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

在这个例子中，我在Chrome上遇到了模糊文本的问题。如果删除z索引，文本会变得尖锐，但在动画中，它会在::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

尝试添加：

-webkit-font-smoothing: antialiased;

添加到按钮属性。