变换：当用固定div覆盖时，在文本上的缩放过渡

Question

转换转换时出现问题：当部分由固定div覆盖时，缩放按钮元素上的文本。

文本在动画期间消失，然后在完成后重新出现。

以下是按钮的代码

CSS：

.social-button {
    display: inline-block;
    background-color: #222222;
    width: 90px;
    height: 90px;
    line-height: 90px;
    margin: 0 10px;
    text-align: center;
    position: relative;
    overflow: hidden;
    opacity: .99;
    border-radius: 28%;
    -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
    transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button:before {
    content: ' ';
    background-color: #000;
    width: 120%;
    height: 120%;
    position: absolute;
    top: 90%;
    left: -110%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
    transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button .fa {
    font-size: 38px;
    vertical-align: middle;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
    transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button.mail:before{
    background-color: #4a7f45;
}
.social-button.mail .fa{
    margin-top: -7px;
    color: #4a7f45;
}
.social-button:focus:before, .social-button:hover:before {
    top: -10%;
    left: -10%;
}
.social-button:focus .fa, .social-button:hover .fa {
    color: #fff;
    -webkit-transform: scale(1);
    transform: scale(1);
}

HTML：

<a href="mailto:mail@kemoke.net" class="social-button mail"><i class="fa fa envelope"></i></a>

只要导航栏覆盖这些按钮，我的网站就会出现此问题。 这似乎只发生在chrome上。