CSS Transition: ease-out hiccups on chrome

user_18542760 0
Viewed 77

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">
    <a href="/competitie"><div class="button_slide slide_diagonal">KLIK HIER</div></a>
</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

css-transitions google-chrome css html
1 Answers

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>

user_21202610
Related