So I made a JavaScript clone of Flappy Bird. It runs beautifully on my 2021 M1 iMac, almost perfect…

It also runs fairly well on my 2023 M2 MacBook Pro, minus some minor glitches. HOWEVER, this is only the case when I use Safari. Opening the game in Chrome on this MacBook makes it run seemingly twice as fast.

Different mobile devices also have various glitches but other identical models using the same browser don’t.

I’m perplexed. Appreciate your help.

This is my gravity function:

function startGravity() {

    function gravity() {
        velocity += gravityConstant;
        let position = parseInt(getComputedStyle(bird).top) + velocity;
        bird.style.top = `${position}px`;

        loops.gravityAnimation = requestAnimationFrame(gravity);
    }

    loops.gravityAnimation = requestAnimationFrame(gravity);
}

And this is the function which slides the obstacles across the screen:

function runShips() {
    //create random ship every 5 seconds
    generateShipsInterval();

    function slideShipsAnimation() {
        document.querySelectorAll('.ships').forEach(ship => {
            ship.style.left = `${parseInt(getComputedStyle(ship).left) - 3}px`;
        });
        loops.slideShipsAnimation = requestAnimationFrame(slideShipsAnimation);
    }
    //run all ships across the screen
    loops.slideShipsAnimation = requestAnimationFrame(slideShipsAnimation);
}

I know it has something to do with the frame rate because trying to implement delta time changes the speed but gives rise to inconsistencies across devices and more glitches.