Chrome scroll up is choppy with 50 sections

[dreds-10]

I have 54 sections. They all contain text, 3 svgs, and one PNG image each. I have been testing only with 3 and everything was fine and smooth, as soon as I added more sections the scrolling wasn't smooth anymore, it's really choppy - and now the whole site is slow, even when hovering an element.

Note: scrolling down is more smooth than scrolling up*

Just as a test purpose, all the images on the sections are the same "example.png", so it's not a overload issue I'm assuming. Could it be the svgs? Or the plugin doesn't support lots of sections?

Do you have any ideas?

THANKS!

[alvarotrigo]

I have 54 sections.

That's the main problem :) It would be nice to have a reproduction of the problem so I could test it by my own as well.

Let me know if it improves by adding the following css to the the fullpage.js container:

#fullpage{
    -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    transform: translatez(0);
}

I would in any case recommend you to make use of some kind of lazy loading technique. You can use the one provided by fullpage.js or make your own if you want to lazy load multiple sections ahead, something like this suggestion.

Besides that, if you can, I would encourage you to create the content of sections dynamically as well. That will reduce the number of DOM elements to move and very probably result in a performance improvement.

[dreds-10]

Thank you for the response.
I tried inserting the CSS you provided and also tried lazy loading but no success, and the content was already being loaded dynamically. After trying everything you suggested and no success, I started debugging content by content.

I removed a line of code in the JS that was generating some HTML code with dynamic content and everything is back to normal!

That was the problem. Now why? I have no idea. The content is simple. It loops through an array and generates a div with 2 pieces of text and a button (like a pop-up for each section). I'm gonna try have the HTML structure in the DOM when the page loads, and just insert the content dynamic.

[dreds-10]

I figured out. I had CSS3 animations happening at the same time as the sections were moving. Took that out and it works perfectly! Thanks for your help and great plugin!

[alvarotrigo]

No problem!