Introduction

TLDR: https://codesandbox.io/s/elated-jennings-6budz. Why does red not do the same as blue in chrome? Is this a bug?

Im useing chrome version: 76.0.3809.132. In firefox everything works as expected.

Question

Im using the waapi to implement an animation relying on a custom timeline (for example the scroll position as timeline). The concept goes as follows:

The waapi allowes you to start an animation midway through by setting the iterationStart option somewhere between 0 and 1 (assuming the animation has just one iteration). When the animation is then immediately paused we get the requested frame. As the next imput gets in, we override the last frame.

So when we get the input of say 0.5 we'd use the following code:

//           test keyframes
elem.animate({marginLeft: ["0px", "600px"]}, {
  duration: 100, 
  easing: "linear",
  fill: "both", 
  iterations: 1, 
  iterationStart: 0.5 // input
}).pause()

This works perfectly, even with as we set such a frame every 1/60 sec. The problem however arises as we want to ease the aniamtion (e.g. easing: "ease" not linear). This introduces wierd gliches where the animation jumps around at the same progress every time (progress = iterationSatrt / input). The first jump for example is at 0.148 using ease as easing function. Can someone explain this behaviour? Is this a bug?

I have come across the follwing correlation. 0.148 * 2 eased with the ease function is just over 0.5. To calculate this I use the bezier-easing library. Here the example: https://runkit.com/embed/1wetjf7jjb2s. I dont know if this is at all relevant but I thought Id share my findings.

Here the codesandbox link showing the problem: https://codesandbox.io/s/elated-jennings-6budz. Please note to not let it run too long at a time without reloading.

The blue div uses a fix to show the expected result. For this I kept easeing: "linear" but customly eased each input with the bezier-easing library as shown above (and in the code).

This was a bug, but has been fixed apparently