background-position changes randomly after resizing window

[maimairel]

Hi, great work on this plugin, looks promising :)
I have got one issue that I haven't been able to fix, and that is with parallax background images, when the responsive option is set to true.

When the page loads with the browser maximized, then everything displays correctly. But this breaks after resizing the window.

Resizing will cause the background position to be misplaced because of a randomly changing background-position-y applied to that element.
If I try output the background array to console in the refresh() method it seems that the startingbackgroundPosition doesn't get reset when the scroll position is set to zero. So the value tends to change randomly when the window is resized.

This issue is really easy to reproduce. Just set a background image to an element with data-stellar-background-ratio and responsive: true, then resize the window. Two or three times resizing will cause different background image positions.

This doesn't happen with particles.

Is there any way to fix this?

Thanks

[markdalgleish]

EDIT: I posted a link to a potential fix, but it doesn't seem to be working like it was yesterday. I'll get back to you.

[maimairel]

Hi markdalgleish,

Thanks :) I'll be waiting for the fix.

[maimairel]

Your previous fix, fixes the changing background position after resize, but a new issue appears. If I scroll after resizing, then the background position seems to be incorrect. It's not the same like before the resize.

[markdalgleish]

I've just pushed an update to the fix. It's a little crude, but it works. Safari doesn't want to play nice for some reason, but Chrome and Firefox are working. I'll keep looking into a better fix, but let me know if it does the trick in the meantime.

[maimairel]

Thanks for the fix it works right now with only a minor problem :)

The problem is like this:

I'm making a responsive site with sections divided into blocks, each section may contain a background-image that will be 'parallaxed' with your plugin. If I started with the page maximized, then resize the window to a size of about a mobile phone's screen (~ 300-400px) then the parallax backgrounds will have wrong positions.

But if I started with the window about that size, then the background-position is correct even after maximizing it. Thus starting with small window size will produce correct results for all window sizes, but starting with maximized window will produce incorrect results for smaller screens. I don't know if this is related to my code, but it might be great if your next fix can fix this problem :)

Thanks for the help.

[maimairel]

UPDATE: seems the issue isn't like that, it's that different window sizes, sometimes cause different background positions before refresh. After refresh, the background position will be correct for that window size. But this isn't a major problem since no one will ever resize the window that many times, I'll just go with it :)

The most perfect parallax plugin ever!

[markdalgleish]

Thanks :)