IOS Safari bug absolute/fixed position elements wi

问题:

I have a website that is using javscript to tell the footer link/logo to be position absolute or position fixed when the footer is in view. The footer is always in view as it's hidden behind the page and appears to slide in when you scroll down.

However on IOS Safari (only mobile browser I have seen do this behavior) the footer doesn't consistently stick/become absolute the way that it does everywhere else.

The code below has some excessive fixes (literally everything I could throw at it) that are still are not fixing it.

So after much experimenting the issue is not with the scroll event. This appears to be a bug that happens when I flick scroll quickly (most noticeably on the homepage) to the bottom. The inspector shows that the javascript has actually fired and as far as safari knows, it's absolutely positioned. However it is displaying at the bottom of the screen. On scrolling up once you achieve this bug, it doesn't correct itself until the javascript would normally fire again to make it fixed.

//is the footer in view? if so, make the footer buttons stick to bottom of wrapper and not page
function checkOffset() {
    if($('.sticky').offset().top + $('.stickyRight').height() >= $('footer').offset().top) {
      $('.sticky').addClass('absolute'); 
    }
    if($(document).scrollTop() + window.innerHeight < $('footer').offset().top) {
        $('.sticky').removeClass('absolute'); // restore when you scroll up
    }

}

$(document).ready(function() {
  var timer = null;
  timer = setTimeout(function() {
      $(document).scroll();
      checkOffset();
  }, 700);
});


$(document).scroll(function() {
  checkOffset();
});

$(document).scroll(function() {
  //safari ios bug where this event is not always getting fired.
  var timer = null;
  timer = setTimeout(function() {
      $(document).scroll();
  }, 800);
});

$(document).scroll(function() {
  //safari ios bug where this event is not always getting fired.
  ios();
});

document.addEventListener("touchstart", ios, false);
document.addEventListener("touchmove", ios, false);
document.addEventListener("touchend", ios, false);
document.addEventListener("gesturechange", function() {ios();})

and my css looks like this:

.sticky {
  position: fixed;
  z-index: 3;
  bottom: 1rem;
}

.stickyLeft {
    left: 1rem;
}

.stickyRight {
    right: 1rem;
}

EDIT: I "solved" this issue by getting rid of this javascript for the home page and keeping it position absolute as default since that was where the issue appeared the most. Something about the height of the page caused the issue. For every other page I used a trimmed down version of the code above.