Edge browser: Jerking movement at the end of transition only when skew and translate are used together

Question

I have a position:absolute element behind my anchor tag. I animate that element with simple css transition when the anchor tag is hovered.

On Edge only, there's this funky jerky movement at the very end of the transition.

I tried adding translateX(0) to both hover and normal states, but that did not remove the jerky move at the end.

Here's the button html:

.button {
  display: inline-block;
  border: none;
  background: transparent;
  position: relative;
  color: #212121;
  font-size: 19px;
  line-height: 1;
  padding: 0;
  margin: 30px;
  text-decoration: none;
  font-weight: 400;
  cursor: pointer;
  z-index: 2;
  transition: .3s;
  transition-timing-function: cubic-bezier(.82, .21, .27, .81);
}

.button-bg {
  position: absolute;
  padding: 30px;
  height: 50px;
  border-radius: 0;
  left: -30px;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  transition: .4s;
  transition-timing-function: cubic-bezier(.82, .21, .27, .81);
  transform-origin: center;
  border: 2px solid #212121;
}

a.button:hover .button-bg {
  -webkit-transform: translateY(-50%) scaleY(2) scaleX(1.4) skewY(10deg);
  transform: translateY(-50%) scaleY(2) scaleX(1.4) skewY(10deg);
  -webkit-transform-origin: center;
  transform-origin: center;
  border: 2px solid transparent;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(48, 48, 48, 0.6);
  -moz-box-shadow: 0px 0px 20px 0px rgba(48, 48, 48, 0.6);
  box-shadow: 0px 0px 20px 0px rgba(48, 48, 48, 0.6);
}

<a class="button case-readmore" href="#">							 
    Read Case
    <span class="button-bg"></span>
    </a>

Expected result can be seen with Chrome, Firefox, Internet explorer etc.

Weird bugfest can be seen with Edge, where the element transforms properly and at the very end of the transform jerks quickly to the right.

If I remove the skew part of the transition, theres no more jerking.

Answer 1

Try to add the default values before the hover. There is probably an interpolation issue.

.button {
  display: inline-block;
  border: none;
  background: transparent;
  position: relative;
  color: #212121;
  font-size: 19px;
  line-height: 1;
  padding: 0;
  margin: 30px;
  text-decoration: none;
  font-weight: 400;
  cursor: pointer;
  z-index: 2;
  transition: .3s;
  transition-timing-function: cubic-bezier(.82, .21, .27, .81);
}

.button-bg {
  position: absolute;
  padding: 30px;
  height: 50px;
  border-radius: 0;
  left: -30px;
  right: -30px;
  top: 50%;
  transform: translateY(-50%) scaleY(1) scaleX(1) skewY(0deg);
  z-index: -1;
  transition: .4s;
  transition-timing-function: cubic-bezier(.82, .21, .27, .81);
  transform-origin: center;
  border: 2px solid #212121;
}

a.button:hover .button-bg {
  transform: translateY(-50%) scaleY(2) scaleX(1.4) skewY(10deg);
  transform-origin: center;
  border: 2px solid transparent;
  box-shadow: 0px 0px 20px 0px rgba(48, 48, 48, 0.6);
}

<a class="button case-readmore" href="#">							 
    Read Case
    <span class="button-bg"></span>
    </a>

Related:

Weird behavior when rotating an element on hover

matrix not equal to translate and rotate combination in css transform animation?

why this keyframe animation form this animation effect