Here is a sample code, shown that mouseUp and mouseDown result in 2 different animation frames even when doing a simple click.

const d = document.createElement('div');
const b = document.createElement('button');
b.textContent = 'Click me!';

b.addEventListener('mousedown', (e) => {
  schedule(() => console.log('schedule button mousedown'));
  console.log('button mousedown');
});

b.addEventListener('click', () => {
  schedule(() => console.log('schedule button click'));
  console.log('button click');
});

b.addEventListener('mouseup', () => {
  schedule(() => console.log('schedule button mouseup'));
  console.log('button mouseup');
});

document.body.appendChild(d);
d.appendChild(b);

let timerId;
function schedule(cb) {
  if (timerId === undefined) {
    timerId = requestAnimationFrame(() => {
      console.log('running synchronization');
      timerId = undefined;
    });
  }
}

Stackblitz demo.

It logs :

button mousedown
running synchronization
button mouseup
button click
running synchronization

Can someone point me to an autorivative answer to why they are systematicaly scheduling different frame even if the event is not a long click. (It would make sense in a long click context).