Default 25px on background position's y axis

[daviedR]

Hi Mark,

First I really love this plugin. And it's the first time I use it for my project. But I got an issue with the plugin. Here's a short story what I did with your plugin.

I create a section at the very top. This section will have parallax background via data-stellar-background-ratio="0.5". I set the section's style to set

background-size: cover;
background-position: center center;
background-attachment: fixed
/* this will create the background image size follow the viewport's size, and it's needed. */

and I set the stellar options like this:

$.stellar({
    horizontalScrolling: false,
    responsive: true,
});

And I fire the script on document.ready. I noticed that when stellar is initiated, it set the background-position to 50% 25px. I don' understand why it gives default 25px on the background-position's y axis.

And then after the window is loaded, as I set the responsive to true, the plugin will calculate the background position. It sets to 50% 50%. But when I scrolled down the page and scrolled back to the very top. It sets to 50% 25px again.

It turns out that I set the ratio to 0.5 it will give you 25px and if I set the ratio to 0.25 I will have 12.5px.

My questions:

• Why the plugin give non-zero initial y axis? I think it should be 0px on y axis position.
• Why your responsive mode reset it to 50% 50%. I believe it should be 50% 0px. This will create a flash which is not good on the eye. Because on ready state you set it to 50% 25px and then on window loaded you set it back to 50% 50%.

Thanks

[mikegrantme]

I'm having the same issue. Hope to see an answer to your question as well! +1 for loving this plugin.

[ianpatrickhines]

I’m seeing the same issue, except for me I’m seeing background-postition: 25px 0;. Otherwise, it’s the same as being described above (i.e., if I halve the ratio to 0.25 I get background-position: 12.5px 0;). Seems buggy to me, but I cannot be sure.

[frontend-3]

Same issue

[OriginalEXE]

Hey folks, I managed to fix it.

The issue happens when browser returns % as a current background position, script parses it as an integer (basically ignores % so 50% === 50px) causing this issue to happen.

To fix, open jquery.stellar.js and change line 435 to look like this:

startingBackgroundPositionLeft: (isNaN(parseInt(backgroundPosition[0], 10))||-1!==backgroundPosition[0].indexOf('%') ? 0 : parseInt(backgroundPosition[0], 10)),

and line 436 like this:

startingBackgroundPositionTop: (isNaN(parseInt(backgroundPosition[1], 10))||-1!==backgroundPosition[1].indexOf('%') ? 0 : parseInt(backgroundPosition[1], 10)),

Hopefully it works for you too :)

[yjsoon]

Just writing here to confirm @OriginalEXE's solution works. Thanks very much.

[camslice]

Nice one @OriginalEXE

[dutchiexl]

Fix didn't work for me, any other suggestions? This only happens in IE for me

[dutchiexl]

It seems, for me, backgroundPosition[1] is not set.

This gives an undifened on startingValueTop: backgroundPosition[1] line 443.

This fixes it:startingValueTop: isNaN(parseInt(backgroundPosition[1], 10) ? 0 : backgroundPosition[1],

[igorlaszlo]

After corrected originalEXE's proposition, i do not have 25px/25px space BUT : i have background-position: 50% 50% and background-size: cover like daviedR, and when i start to scroll, the background jumps to background-position: 50% 0px. If i do not use background-size: cover, it does not matter, the background jumps back to top 0px in any way... Some suggestion ?
@daviedR : how did you do it ?
(PS: This plugin would be even more popular with some more explications... a year ago i wanted to use but it did not work for me because i could not get any explication, not even on Stackoverflow forum... however, it is a good plugin !)

[igorlaszlo]

@dutchiexl : i guess you did not close your code, my dreamweaver signs an error... when i close it like this : startingValueTop: isNaN(parseInt(backgroundPosition[1], 10) ? 0 : backgroundPosition[1]), it does not solve my problem (that i have set background-position 50% 50% but it jumps back to 0px to top when scrolling)...

[igorlaszlo]

Also i want to tell to @OriginalEXE that the js file was not updated with the fixed codes in the website : http://markdalgleish.com/projects/stellar.js/ where i downloaded the docs some days ago...

[andrewmy]

Thank you @OriginalEXE!

[OriginalEXE]

Hi @igorlaszlo, I am aware of that. I am not the author of this script so I have no power to apply the fix to the it, I submitted a pull request for the original author but this script is no longer maintained.

[dephora]

Is this fix still working on current versions of Chrome? I seem to be having the issue on Chrome 40, though I had not tried it in previous builds. It works fine in FireFox.

[OriginalEXE]

Should work in version 40 too, do you have any live url I could test? Also, are you sure you are loading the correct version and have cleared the cache?

[crcommons]

Unfortunately this didn't work for me either. When the page loads the background-position is set to 50% 50%. On scroll, it changes to 50% 37.5px. After making the changes to the Stellar.js file, it loads with 50% 50%, but now changes to 50% 0px. I'm not sure what to do...

Any help would be much appreciated!

[ghost]

@crcommons I think you should find yourself something else to create the parallax scrolling effect since stellar.js just ignores the unit and treat everything as px and the author isn't planning to do any maintenance.

[bitkidd]

This worked for me.

background-size: cover;
background-position: 0 0;
background-attachment: fixed;
background-repeat: no-repeat;

[ExDementia]

@keeross That worked for me perfectly, thanks!

[Arcrammer]

@OriginalEXE Wow. Great job.

[ctrl-d]

i simply added verticalOffset: 50, and it works just fine