Search code examples
javascriptjquerycssparallaxparallax.js

Can't diagnose: Background position different on page open

I am using parallax.js on my web page.

http://www.edizarca.com/karpaz/ (page has been now updated, parallax is remove until a feaseable solution found)

But open the page and keep refreshing. Sometimes the background image starts eerie(off position). Ive tested both in chrome and firefox and I can't figure out why its doing this.

Do you have any idea?

Thanks

Solution

  • The following is what I've discovered by inspection.

    parallax.js stores the initial top offset of the element to which it is applied. This value is stored in a variable called firstTop. The background-position will be placed based on the value of firstTop and the current scroll position, in such way that background-position will only be able to reach 0 if firstTop is 0 [for example if firstTop is 96 background-position will not be less of 67].

    Note: more about 96 later.

    That's right, firstTop is not always 0, form time to time I manage to get to a non-zero value. I suspect it has something to do with browser cache.

    So, from where does the value firstTop come from? Here is the code:

    //get the starting position of each element to have parallax applied to it      
$this.each(function(){
    firstTop = $this.offset().top;
});

    Where offset is a function defined in JQuery. In the particular case of querying an element it will fall back to getBoundingClientRect. So, if the problem where there, it would be a bug of the browser...

    So, to look in another direction... the value I've got is 96 and it is just [sometimes] after a cache clean. At the break point there is nothing rendered yet except for a gray background an a scroll bar... but if I have not cleared the cache at the break point the layout of the page is visible.

    About 96, it is the height of the div with id "header". By the moment I hit the break point the height differs, depending of if I have cleaned the cache. If I have cleared cache it is [sometimes] 96, if have not it is 150 (but now the div with id "wrapper" has position: relative and it's top offset is 0).

    So.... how do we explain this behaviour?

    The file style.css of course. If the cache is invalidated the browser has to download it again, meanwhile it will go to execute javascript. If it reads the position of the div with id "wrapped" before the css is applied then the offset is wrong. Of course when the style is loaded from cache it is applied right away leaving no chance for javascript to misbehave.

    Note: I also got a firstTop of 233 and a height of the div with id "header" of 195.875.

    The solution? I don't know. I suspect parallax.js could allow some way to set a fixed initial offset. (there is no way to set the initial offset as the code stands).

    You could look for a library that allows to check for the styles. (Note: reading the styles with javascript doesn't work, because they may be loaded but not applied).

    If I were you, I would modify parallax.js (or try another version). There is no need to modify parallax.js.

    EDIT 1:

    You should try to:

    the idea is to make the browser execute the initialization of parallax "a bit later" so that it will apply css but not "too late" that the user will start interacting with the page.

    EDIT 2:

    • Place the styles before any javascript (or put javascript at the end of the document).
    • Use $(document).load rather than $(document).ready to run parallax.js