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.

Please do mention the exact versions of the browsers tested, so that it might be easier to reproduce the issue. Also, consider adding runnable example using http://jsfiddle.net, http://codepen.io, http://plnkr.co etc or use 'stack snippets' by using by clicking the [<>] toolbar button in the edit section — Sebin Benjamin, Jul 02 '19 at 10:01
When you are adding any property on hover you need to add default values before hover of elements. — Mak0619, Jul 02 '19 at 10:59
@MayankGupta it's not needed for transform, related: https://stackoverflow.com/a/52599866/8620333 — Temani Afif, Jul 02 '19 at 11:48

Temani Afif · Accepted Answer · 2019-07-02T12:02:37.840

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>

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

why this keyframe animation form this animation effect

This was indeed it. I tried scaleX(1) before asking, but did not specify the skewY or scaleY because I saw the jerk happen sideways. For some reason that made me assume it must be a scaleX issue alone. — Jussi, Jul 02 '19 at 11:43
@Jussi it's not really the scale, but an interpolation issue because technically the browser should add scaleX(1) by default, related: https://stackoverflow.com/a/52599866/8620333 — Temani Afif, Jul 02 '19 at 11:48

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

1 Answers1