How to bypass background position change delay in browser?

Question

css

I sketched out such a code, in the hope that it will be possible to implement parallax scrolling. but in all browsers the background twitches when scrolling. I would like to know if there is a way to keep this method but eliminate the lags?

$paralaxBlock = $('.order.order-position');
  var img = new Image;
  var href = $paralaxBlock.css('background-image').replace(/url\(\"|\"\)$/ig, "");
  img.src = href;
  img.onload = function(){
    $paralaxBlock.css('background-size','cover')
    $paralaxBlock.css('background-position-x','center')
    $paralaxBlock.css('background-position-y',(-1)*$paralaxBlock[0].getBoundingClientRect().top)
    var original = $paralaxBlock[0]
    setInterval(function() {
       $paralaxBlock.css('background-position-y',0-original.getBoundingClientRect().top)
    },0);
    
   // $(window).scroll(function(){
     // $paralaxBlock.css('background-position-y',(-1)*$paralaxBlock[0].getBoundingClientRect().top)
   // });
  }