Jumps over section on scroll

[sideveis]

Hi!

I have an issue when scrolling down a fullpage.js page it jumps over sections.

Is there an issue when React rerenders a component in regards to the fullpage render? Just a hint.. The scroll problem could be an issue without rerenders also..

It's not consequent, and will not happen every time

https://codesandbox.io/s/fullpage-scroll-637qdy?file=/src/App.js https://637qdy.csb.app/

Im also added a css override to be able to set inner content in the sections to 100% height .fp-overflow { height: 100%; }

[alvarotrigo]

Can you provide details on how to reproduce the issue?

Browser, OS, versions.

I'm unable to reproduce it on your codesanbox.

[sideveis]

Im on Windows 10 with Chrome 107 where I have the issue. Its also been testet on browserstack with Mac - Catalina - Safari 13.1 where its happening more frequent then in Chrome.

[alvarotrigo]

Safari 13.1 in Catalina show errors:

I assume the steps for the reproduction are just

• Scroll up/down on desktop using mouse wheel/trackpad?

[alvarotrigo]

I can't see any error on Windows 10, Chrome 107:

https://user-images.githubusercontent.com/1706326/200849456-ef5f3f2f-7eec-40c8-b8fc-412381a48fa5.mp4

[sideveis]

I fixed the missing key. Its happening on mouse wheel scroll

[alvarotrigo]

Can't see any issue on Safari either. Although for some reason there are no background colors there.

https://user-images.githubusercontent.com/1706326/200852089-092f8662-1772-4c01-87c6-0dd33fdd9a9a.mp4

[sideveis]

When I do mouse wheel scroll it does not stop on the next section, it continues to scroll from C, and to the bottom. Browserstack Safari 13.1 The issue was reported by an designer on MAC with the same problem. It also happens occasionally on my Windows OS in Chrome

I also notice the missing colors in Browserstack Safari. I guess tailwind cdn is not loaded. This is just a fast reproduction with fullpage in isolation. We also have the same issue in a real customer project.

[alvarotrigo]

No idea what that can be. Can you reproduce it here? https://codepen.io/alvarotrigo/pen/qqabrp

[alvarotrigo]

If you can attach a video that'd be great too.

[sideveis]

https://user-images.githubusercontent.com/94442960/200869729-b6d82c63-7867-4f67-b579-5e2d1ce4b25a.mp4

[sideveis]

Same issue with the codepen! Could it be the type of mouse the users have?

[alvarotrigo]

Same issue with the codepen! Could it be the type of mouse the users have?

Yeah very probably. You can try increasing the value for the scrollingSpeed. Try using scrollingSpeed: 2000 and see if you still get it.

Also make sure you test it outside Browserstack as well. Just in case this is also part of the problem when dealing with event delays.

[sideveis]

I have set the scrollingSpeed to 2000 for the codesandbox test https://637qdy.csb.app/ Same issue when testing in Safari (browserstack since I do not have a Mac myself).

I do have issues on my Chrome also (but not every time), so the problem is outside browserstack. When testing on my Chrome right now I did not have any issues.

The first report of this issue was from a Mac with Safari. Not sure what type of mouse in use for this person.

Thanks for helping out

[alvarotrigo]

I'd bet for a mouse issue on his side. Probably using an Apple Magic mouse or any other mouse with kinetic scrolling like Logitecg MX Master 3.

Unfortunately, there's no solution for it. His wheel event is probably firing hundreds of wheel events with a single scroll / wipe and it continues triggering them (and accelerating) after landing on a section.

Something you/he can try to bring some light into this is running this quick test: http://jsfiddle.net/56z0k7rL/3/

• Scroll / Swipe once as you would on the website
• Wait about 2 to 3 seconds
• Click on the "Chart" button

You'll see a chart with the data from the mouse wheel event. Then the highest value and the time it took for it to stop.

On a normal mouse without kinetic scroll you would see something like this:

On one with a bit of kinetic scroll (simulated by using a Mac app like Mos app)

And this using the Macbook kinetic trackpad (default)

My guess is you or him are having superior times.

[sideveis]

Thanks, I did try with my MX Vertical mouse. I will get others to try it out too. Here is my result:

So there is no way around this type of problems then?

[alvarotrigo]

So there is no way around this type of problems then?

Not implemented in fullPage.js and not a robust solution that I'm aware of.

But I'd say there are very few people that get affected by it on fullPage.js when using a value of 1000 or 1200 for the scrolling speed.

[sideveis]

On the customer site where the issue was first found we actually used 1200 for scroll speed. Maybe we have to experiment with speed even slower then 1200 then. Thanks for quick and informative response on the issue

[sideveis]

In the section "Section C" on the demo site https://637qdy.csb.app/ I have added a Read more button. When hitting read more, then scroll a bit down, and then hit read more to hide the text again it jumps out of the section.

Any solution to this behavior?

https://user-images.githubusercontent.com/94442960/201038788-81a92007-1928-43c4-96a1-bd5264e88148.mp4

[sideveis]

Another test on Codesandbox Code: https://codesandbox.io/s/fullpage-js-test-scroll-sdro66?file=/src/fullpage.js Result page: https://sdro66.csb.app

Its also seems like the result is different in a React app, then in a Next.js app. Is there any issues with fullpage.js and Next.js? Same code as in the sandbox above in Next.js gives a more buggy result (on Mac Safari)

About mouse wheel. We have a person testing on a Mac. In Chrome its working, in Safari its not. Using the same mouse.

[sideveis]

Is it another way you should setup fp-overflow? When inner content is min-height 100% and content could expand to inner scroll. Trying to find out why its working in some cases and not in all browsers..

[alvarotrigo]

In the section "Section C" on the demo site https://637qdy.csb.app/ I have added a Read more button. When hitting read more, then scroll a bit down, and then hit read more to hide the text again it jumps out of the section.

Right! That seems to be a bug on fullPage.js. I've created a new issue for it on the repository for fullPage.js together with an isolated reproduction in Vanilla JS.

I also created a more simple reproduction in codesandbox based on your example but simplying it: https://codesandbox.io/s/fullpage-scroll-forked-ffx5o5?file=/src/App.js

[alvarotrigo]

Is it another way you should setup fp-overflow? When inner content is min-height 100% and content could expand to inner scroll.

Feel free to create another issue about this on the main fullPage.js repository, as that's not a react-fullpage.js specific matter: https://github.com/alvarotrigo/fullPage.js/issues

[sideveis]

Thanks @alvarotrigo

[alvarotrigo]

That seems to be a bug on fullPage.js. I've created a new issue for it on the repository for fullPage.js together with an isolated reproduction in Vanilla JS.

This issue is solved now on the dev branch. Will soon get merged into a new release.

[alvarotrigo]

That seems to be a bug on fullPage.js. I've created https://github.com/alvarotrigo/fullPage.js/issues/4479 on the repository for fullPage.js together with an isolated reproduction in Vanilla JS.

Fixed on the latest release react-fullpage 0.1.30

[sideveis]

Thanks @alvarotrigo, we will test v 0.1.30 out in the customer project. I have a new test (for Mac Safari) on the latest v0.1.30 where we still see issues with scrolling. Could it be other problemes then the kinetic scroll issue? Could it be Next.js combined with useState or other parts that triggers a rerender of the page?

Demo: https://2ijdgt-3000.preview.csb.app/fullpage

Code: https://codesandbox.io/p/github/sideveis/nextjs-fullpage-test/csb-2ijdgt/draft/upbeat-bhabha?file=%2Fpages%2Ffullpage.js

Testet in Mac Safari v.15.6

• jumps over sections
• jumps past the footer to white screen
• flickering on scroll (white blink)
• sometimes breaks in the middle of a scroll

https://user-images.githubusercontent.com/94442960/201611153-2bed7c4f-3422-4f30-8277-5a109dc3e0e0.mp4

[alvarotrigo]

Try using this for the Safari flickering:

        .fp-section{
            transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
        }

It's one of the suggestions to fix these Safari issues when dealing with transformations: https://stackoverflow.com/q/3461441/1081396

It's actually an issue on Safari, but I guess fullPage.js can apply these styles to all sections if this fixes the issue

[sideveis]

Thank, the flicker is not longer an issue https://2ijdgt-3000.preview.csb.app/fullpage

But there is still a lot of issues regarding scroll and jumping (on Mac Safari)

https://user-images.githubusercontent.com/94442960/201675695-68a85ed2-d554-4cf7-bcc9-e3628ef34b28.mp4

[alvarotrigo]

But there is still a lot of issues regarding scroll and jumping (on Mac Safari)

Can you remove the content in all callbacks and get rid of the useState too? Let's try to isolate the issue to figure out where its coming from.

[sideveis]

Here is a URL without useState. It seems more stable when I test it on Browserstack

https://2ijdgt-3000.preview.csb.app/fullpage-clean

Code: https://codesandbox.io/p/github/sideveis/nextjs-fullpage-test/csb-2ijdgt/draft/upbeat-bhabha?file=%2Fpages%2Ffullpage-clean.js

[alvarotrigo]

Thanks! 👍

I was able to reproduce the issue without React, so I've created a new issue on the fullPage.js repository about it.

The issue has been fixed on the dev branch 4.0.15. 🥳

Will get merged on the next release.

[sideveis]

Thanks!

[sideveis]

@alvarotrigo when will the next release for the react wrapper be out?

[lumiere10]

Thanks! 👍

I was able to reproduce the issue without React, so I've created a new issue on the fullPage.js repository about it.

The issue has been fixed on the dev branch 4.0.15. 🥳

Will get merged on the next release.

hello, please tell me when to expect the release of these fixes?

[alvarotrigo]

@alvarotrigo when will the next release for the react wrapper be out?

Done! 0.1.31 available now.

[alvarotrigo]

I'll close this issue as it seems all the fullPage.js-related issues have been solved in version 4.0.15 of fullPage.js. Except for the scrolling one which is also an open issue on the fullPage.js protect and has no good fix.

For any other issues please open a new issue on fullPage.js repo (if you can reproduce it with just fullPage.js) or here otherwise.