Content scrolls overlaps parallax itself

[casikr]

Content scrolls overlaps parallax itself

[mikegreiling]

Unfortunately, this is a limitation of the way this plugin is implemented. The parallax layers are essentially fixed position elements behind the document body so they will show up behind anything that doesn't have a background applied to it. The way I've been using it is to add background: #fff to the sections above and below the parallax which mask any accidental bleeding of the image into the background of the content surrounding it. If you opt for this method, you can also set a bleed attribute to make the background image slightly bigger than the target element. This will reduce some jittering in browsers which don't keep up well with the animation (like Safari).

See the parallax demo page and its source as an example.

[casikr]

Thank you Sir. This works for me like a charm - ones more thank you for the plugin!

[casikr]

... is there any chance to fix safari as well Sir?
http://www.piotrmajcher.nazwa.pl/heima/folio/lazio-ss-merda/

[mikegreiling]

Is it not working in Safari? It appears to be working for me.

[mikegreiling]

Hello @casikr, after revisiting this issue it appears that your problem is similar to issue #34. Triggering a resize and a scroll event appears to fix the issue when I tested this in Safari. Please review the solution there and let me know if it helps.

Closing for now.

[casikr]

Hi Mike, thank you - this is partially the case, when I disable shareholic plugin (which appear to resize window) it works fine and my parallax image appears and scrolls exactly as it suppose to. I was trying to add jQuery(window).trigger('resize').trigger('scroll') to the plugin but - as this is quite complicated can't find where to put it to get this working. Any indications?

Second thing is the overlap in Safari 6 (I test in on Windows7). But this is not very important - the usage of Safari 6 in my country is part-per-thousend.

Best regards

[mikegreiling]

Unfortunately, I am not familiar with the Shareholic plugin. Typically, these types of plugins use javascript to manipulate the DOM, sometimes after an asynchronous request to some external server. Well written plugins will provide a way to "hook" into these events and trigger something once the operation is finished, but in the case that it does not, you would need to locate the part of the code where the DOM manipulation is performed and place the trigger('resize')... statement after that.

Another, hacky solution would be to perform the triggers automatically after a delay, like the following example:

setTimeout(function() {
    jQuery(window).trigger('resize').trigger('scroll');
}, 500); // wait 500ms

You'd need to play around with the delay value so as to approximate the time at which the DOM is done being modified.

[danygiguere]

I love your plugin. It's very simple and I like the fact that we see a fixed image rather than the parallax effect on mobiles. I have a problem though where the content overlaps the parallax sections when resizing and scrolling. I have used jQuery(window).trigger('resize').trigger('scroll'); and I also tried copying the entire script and the html parallax-container from http://pixelcog.github.io/parallax.js/. I also tried deleting all other script links but I still get the same problem. My website can be found here: https://dl.dropboxusercontent.com/u/43708060/MyAlpine/index.html.

Your help would be very appreciated !!!