Issue with page reload and whitespace

[nickmak]

I am getting this issue with both the latest version 1.x and the alpha/beta 2.x.

When I reload a page and I am scrolled down on the page, scrolling back up I see that there is a white spaced gap due to the height calculation.

I am not sure how to go about fixing this, nor am I really sure how to share the issue with code as any codepen will just refresh the page at the top.

Code

<div class="parallax-window" data-over-scroll-fix="true" data-parallax data-src="image/url.jpg">
  // Start markup/code
</div>

Page Refreshed at the top of the page

Page when refreshed lower down on the screen

My Environment

Bootstrap 4 latest version
Owl Carousel latest version 2.x

[alliance-dev-main]

I'm having the same issue using bootstrap v4 and parallax.js v1.5

[wstoettinger]

could anyone provide a link for testing? thanks!

[wstoettinger]

try triggering a resize to recalculate the windows when the document is loaded like so:

$(function() {
    $(window).trigger('resize').trigger('scroll');
});

[nickmak]

Unfortunately that does not resolve the issue for me.

[nickmak]

The issue I see is that the height never readjusts itself. My site is in a dev phase, so it is not accessible via web, however if you'd like, I can package it and email it to you. It's a WP site.

[alliance-dev-main]

With adding setTimeout it works for me, thanks.

setTimeout(function(){
    $(window).trigger('resize').trigger('scroll');  
}, 1000);

[nickmak]

Unfortunately even a set timeout doesn't work. If it makes any difference, the parallax effect is on a hero region

[nickmak]

Hi there, any chance you'd like to see my code?

[sandrots]

check the position attribute in the .parallax-window css. maybe it sould be 'absolute' instead of 'fixed'.

[nickmak]

@sandrots The positioning is fixed. As is the same with all the other sites that I use this on. The parallax is in my hero region.

Perhaps the issue is that, as this is set in the body element and I have a set height on the hero-container (first element in the main content), with position fixed, causes this?

[sandrots]

i had this problem too. i changed the position in absolute and move the div to the top.

[nickmak]

@sandrots Didn't resolve the issue for me. It's something to do with the transform: translate3d trigger or registry.

[nickmak]

I'm going to leave this open, but just noting I moved to an alternative plugin as the project needed to go live last week.

[wstoettinger]

hey @nickmak,

sorry to hear that you had to move to an alternative plugin! I would be still interested in solving this. could you provide a code excerpt (most important html, js and css) before and after the plugin is initialized?

cheers
Wolfgang

[nickmak]

@wstoettinger Sure, I'll work on that, it'll take me a few hours to export that out

[nickmak]

@wstoettinger Sorry for the delay, took a little bit to compile a working demo. I've attached HTML/JS/CSS files that you can see what I'm seeing.
parallax-demo.zip

[akanolkar-cci]

// re-initialize animation onclick of tab links:
$(window).trigger('resize.px.parallax');