Strange gap under parallax section in Chrome but not Firefox

I've got a strange white gap beneath a parallax section which appears in Chrome and IE: http://prntscr.com/g3on35  but not in Firefox.

As you scroll down this page Supreme - VISION   you'll notice a gap appears towards the bottom just before the footer. 

Here's the parallax.js file, in RED:

$(window).scroll(function(e) {

  parallax();

})

function parallax() {

  var scroll = $(window).scrollTop();

  var screenHeight = $(window).height();

  $('.parallax').each(function() {

    var offset = $(this).offset().top;

    var distanceFromBottom = offset - scroll - screenHeight

    if (offset > screenHeight && offset) {

      $(this).css('background-position', 'center ' + (( distanceFromBottom  ) * 0.2) +'px');

    } else {

      $(this).css('background-position', 'center ' + (( -scroll ) * 0.2) + 'px');

    }

  })

}

Is there a way to get it to display the way it does in Firefox without the gap?

Brandon