pixelcog / parallax.js

Simple parallax scrolling effect inspired by Spotify.com implemented as a jQuery plugin
MIT License
3.53k stars 838 forks source link

Janky Scrolling/Layout issues in Firefox #249

Open WordsofDefiance opened 6 years ago

WordsofDefiance commented 6 years ago

Hi,

Love the plugin. Works great on Chrome. However, I am running into some really bad issues when scrolling on firefox. The background image lags severely behind the scroll. I found some similar tickets to this but no one ever found a good solution. I wonder if this has to do with asynchronous scrolling? The page I'm working on is throwing the following error:

This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!

wstoettinger commented 6 years ago

@WordsofDefiance unfortunately, I cannot reproduce this issue (i'm using Firefox Nightly 61). Which version of Firefox are you using? Could you provide a test link?

And could you try the demo page with your version of Firefox and check for this error? http://pixelcog.github.io/parallax.js/

this would help narrowing down the cause of this issue!

wstoettinger commented 6 years ago

PD: are you using v 1.5 or 2.0 alpha?

WordsofDefiance commented 6 years ago

Hi, thanks for your prompt response. Apologies for my lengthy delay.

I am using 1.5.0.

I've tested this in Firefox Dev edition 60.0b7 and Firefox 58.0.1 and saw the same behavior.

Here's a video of the issue -- I can send you a URL if you'd prefer but I'd rather send it privately as it's a dev instance of a client site. janky scrolling.zip

wstoettinger commented 6 years ago

@WordsofDefiance this is definitely a very bad lag! are you using a smooth-scrolling plugin? or custom scrollbar or something similar? my guess would be, that such a plugin (together with how firefox handles scrolling) is the cause of your problem.

There have been some improvements with V2 on this front and I would appreciate very much if you could try V2 and let me know if that works.

avoliva commented 6 years ago

I updated to version 2 and was still having this issue even in Chrome. I just added an "offset" option which moves the image up -x pixels and increased the height by x pixels, and then added a z-index higher than the mirror on the sections above and below the container so the image didn't overlap onto those sections. So the issue still happens, but it's hidden because the image is moved x pixels up.

cadmicro commented 6 years ago

I have also experienced issues with this.

Klodd commented 6 years ago

I have the same issue on my website, I think it is a performance issue that happens when the images are too big. On the demo page images are around 150ko and the delay is ok, on my website images are about 250 to 300ko and the lag is big enough to be annoying. I will try to reduce image size and update this comment.

I tried with v2 and got the same result.

wstoettinger commented 6 years ago

@Klodd this little difference in size should not cause problems. could you provide a link to the site so i can check?

Klodd commented 6 years ago

Thanks a lot! Website is at www.tandemonde.fr

wstoettinger commented 6 years ago

@Klodd the only thing I noticed on your page is the "jump" of the menu when scrolling on Chrome. In Firefox this is not an issue. However, this does not seem to be related to this library but to the menu.

If you meant a different issue, please explain it in more detail so I can check it again!

jamesburt85 commented 4 years ago

Hey - is this thread still going?

I have the same issue and have tried 2.0 but to no avail.

Can I send you the link privately?

jamesburt85 commented 4 years ago

Hey, sorry to nudge you, but is there any development on this?

Still getting a lot of lag and stuttering on Firefox...