Changing background-image on scroll with javascript retina display problem

I can't find a solution so far for how to solve my problem with changing my background-image on scroll with javascript jquery on retina displays. I found a way how to fix it if i just use one background-image without a change but i want to keep my change on scroll position function. So basically the code is running fine on larger screens. It's just an apple thing. Every help is very welcome.

Thank you.

jquery function working fine but not on iOS devices.

    $(window).on("scroll touchmove", function() {
    if ($(document).scrollTop() < $("#second").position().top  ) 
    {
        $('body').css('background-image', 'url(/images/jimmy9.jpg)')
    };
    if ($(document).scrollTop() >= $("#second").position().top && $(document).scrollTop() < $("#third").position().top)
    {
        $('body').css('background-image', 'url(images/jimmy8.jpg)')
    };
   if ($(document).scrollTop() >= $("#third").position().top && $(document).scrollTop() < $("#fourth").position().top ) 
   {
        $('body').css('background-image', 'url(images/jimmy10.jpg)')
   };
   if ($(document).scrollTop() >= $("#fourth").position().top) 
   {
        $('body').css('background-image','url(images/jimmy11.jpg)')
   }; 
   if ($(window).width() < 1400) { 
    $('body').css('background-image', 'unset'); 
};