Why do equal-duration d3 transitions get out-of-sync?

Question

Here is a simple bl.ock demonstrating the problem.

In this animation, the line's transition has the same duration as the circle's transition. Despite their equal durations, the line's tip appears to move faster than the circle over the course of the 20-second animation.

The screenshot shows the effect at the beginning (left) and the end of the transition (right), respectively.

Why do these two transitions get out-of-sync?

Answer 1

This issue seems to be caused not by the transitions getting out of sync, but by the computation of the position of the point on the path. In particular, it occurs in this reduced example that doesn't have concurrent transitions and is also visible initially when the transition is reversed .

This effect shows up in FF 42 and Chrome 46, but not in IE 11.