CSS过渡:缓解chrome上的问题

Question

我正在处理一些按钮，当您将鼠标悬停在按钮上时，这些按钮会填充颜色。在MacBook上运行的safari上，这种过渡非常有效。但当我用Chrome在windows设备上制作动画时，它的结尾会出现多次闪烁。我四处寻找解决方案，但找不到。

.button_slide {
color: black;
border: 2px solid #ffffff;
border-radius: 0px;
padding: 18px 45px;
display: inline-block;
font-family: "Lucida Console", Monaco, monospace;
font-size: 14px;
letter-spacing: 5px;
cursor: pointer;
box-shadow: inset 0 0 0 0 #ffffff;
/* -webkit-transition: ease-out 0.4s !important;
-moz-transition: ease-out 0.4s !important; */
transition: ease-out 0.4s;
}
.slide_diagonal:hover {
box-shadow: inset 400px 50px 0 0 #007ACC;
border: 2px solid #007ACC;
}
#outer {
position: relative;
top: 60%;
left: 50%;
transform: translate(-50%,-50%);
width: 364px;
/*margin: 50px auto 0 auto;*/
text-align: center;
}

<div id="outer">
<a href="/competitie"><div class="button_slide slide_diagonal">KLIK HIER</div></a>
</div>

打嗝的原因

DreamTeK的回答有助于指出这个问题。看起来，当变换transform: translate(-50%,-50%);应用于#outer时，Chrome会中断动画。剩下的唯一问题是，为什么这会导致这个问题？

编辑：打字错误，额外信息

Answer 1

我无法确定Chrome在框转换方面出现问题的确切原因，但我使用了一种不同的方法，可以更平滑地创建相同的效果。

#outer {
width: 220px;
margin: 50px auto;
text-align: center;
}
.button_slide {
position: relative;
color: black;
border: 2px solid #ffffff;
padding: 18px 45px;
display: block;
font: 14px "Lucida Console", Monaco, monospace;
letter-spacing: 5px;
text-decoration: none;
cursor: pointer;
transition: ease-out 0.4s;
width: 100%;
box-sizing: border-box;
}
.button_slide::before {
content: '';
box-shadow: inset 0 0 0 0 #fff;
transition: ease-in-out 0.4s;
border: 2px solid #fff;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
z-index: -1;
}
.slide_diagonal:hover::before {
box-shadow: inset 300px 50px 0 0 #007ACC;
border-color: #007ACC;
}

<div id="outer">
<a class="button_slide slide_diagonal">KLIK HIER</a>
</div>