Ошибка анимации с Edge при использовании отрицательного фона

Question

Я использую анимацию с background-position. Когда он работает от отрицательного значения до положительного значения, Edge запускает анимацию в обратном направлении (см. Экземпляр Statement-Left). Он отлично работает в Chrome и Firefox, а также во всех браузерах для примера "правильное утверждение".

JFiddle здесь: https://jsfiddle.net/4yape5wr/17/

<div class="statement-left">
  <h2 class="line-dot-left play-left line-dot-left--an line-dot-left--an-1">Heading 1</h2>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et </p>
</div>

<div class="statement-right">
  <h2 class="line-dot-right play-right line-dot-right--an line-dot-right--an-2">Heading 2</h2>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et </p>
</div>

CSS:

.statement-left {
  float: left;
  text-align: left;
  width: 50%;
  margin-right: 0;
  margin-bottom: 30px;
}

.statement-right {
  text-align: right;
  width: 50%;
  margin-right: 0;
  margin-bottom: 30px;
}

.line-dot-left {
  background-image: url(http://sarahevansdesign.co.uk/img/line-dot.svg);
  background-repeat: no-repeat;
  background-position: bottom right;
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.play-left {
  animation: play-left 4s;
  background-position: -2000px 100%;
  animation-fill-mode: forwards;
}

.line-dot-right {
  background-image: url(http://sarahevansdesign.co.uk/img/line-dot-right.svg);
  background-repeat: no-repeat;
  background-position: bottom left;
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.play-right {
  animation: play-right 4s;
  background-position: 1400px 100%;
  animation-fill-mode: forwards;
}

@keyframes play-left {
  0% {
    background-position: -2000px 100%
  }
  100% {
    background-position: 100% 100%
  }
}

@keyframes play-right {
  0% {
    background-position: 1400px 100%
  }
  100% {
    background-position: 0 100%
  }
}