RequestAnimationFrame lags in chrome timeline

Question

I have a question about Google Chrome and Timeline tab in DevTools. I use window.requestAnimationFrame() with recursive call:

function animateRequestAnimationFrame(element, animation, timing, time) {
    (function nextAnimationFrame() {
        window.requestAnimationFrame(function (elapsed) {
            var progress = elapsed / time;

            if (progress < 1) {
                animation(element, timing(progress));
                nextAnimationFrame();
            } else {
                animation(element, timing(1));
            }
        });
    })();
}

In timeline i see this: . Why every RequestAnimationFrame callbacks are not at start of a frames?

Answer 1

Because that's the definition of requestAnimationFrame:

The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint. The method takes a callback as an argument to be invoked before the repaint.