CSS Transition: ease-out hiccups on chrome - html

Question

I'm working on some buttons that fill with a color when you hover over the button. The transition works perfectly on safari that runs on a MacBook. But when I do the animation on my windows device with Chrome, it has a hiccup on the end with multiple flashes. I have searched around for a solution but I couldn't find any.
.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">
<div class="button_slide slide_diagonal">KLIK HIER</div>
</div>
Reason of hiccup
The answer from DreamTeK helped out to point out the issue. It looks like that when a transform transform: translate(-50%,-50%); is applied to #outer, Chrome will hiccup the animation. The only question that will be left is, why does this cause the issue?
edit: typos, extra information

Answer 1

I wasn't able to pinpoint the exact reason Chrome has issues with the box-transition however I used a differant method that creates the same effect much smoother.
#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>