Fullpage.js: Flickering error on Google Chrome 73

[iochoaveiss]

In Google Chrome 73, latest release, fullpage flickers when doing the scroll. In addition, in console we can also see the following error:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312 we @ fullpage.min.js?34874:sourcemap:11 Pt @ fullpage.min.js?34874:sourcemap:11

Example

The issue can be reproduced in the scrollBar example, provided with the library.

Versions

Browser: Google Chrome 73.0.3683.75 (released on March 15th 2019)

[arsik]

Small hack. It doesn't work perfectly but better than without it.

function preventDefault(event){
      if(event.preventDefault){
          // event.preventDefault();
          // event.returnValue = true;
          if (!document.body.classList.contains('animated')) {
              document.body.style.overflow = 'hidden';
              document.body.classList.add('animated');
              setTimeout(function () {
                  document.body.style.overflow = 'auto';
                  document.body.classList.remove('animated');
              }, 700);
          }
      }
      else{
          event.returnValue = false;
      }
  }

[iochoaveiss]

Small hack. It doesn't work perfectly but better than without it.

function preventDefault(event){
      if(event.preventDefault){
          // event.preventDefault();
          // event.returnValue = true;
          if (!document.body.classList.contains('animated')) {
              document.body.style.overflow = 'hidden';
              document.body.classList.add('animated');
              setTimeout(function () {
                  document.body.style.overflow = 'auto';
                  document.body.classList.remove('animated');
              }, 700);
          }
      }
      else{
          event.returnValue = false;
      }
  }

Sorry, I'm quite new to the library. What should I do with this code?

[alvarotrigo]

@iochoaveiss Thanks for reporting it! Looks ugly indeed!
I'll take a look at it!

[arsik]

@iochoaveiss you need to find and replace this function in library or you can hope when author of this lib will fix it himself

[iochoaveiss]

@arsik thanks for the answer. I think I will wait for an official solution.

[alvarotrigo]

I've fixed the issue on the dev branch 3.0.5..

It will get merged in the next release.

[iochoaveiss]

@alvarotrigo Thank you so much. The flickering is now solved.

[alvarotrigo]

No problem! 😉

[deepfriedfilth]

@alvarotrigo I believe this issue is still affecting fullpage instances if lockAnchors option is not explicitly set to true even using latest 3.0.5 from dev branch

These were my options prior, that resulted in jumping down 3 sections prior to every vertical/section move (destination would still work as intended)

sectionSelector: 'section',
scrollBar: true,
controlArrows: false,
autoScrolling: true,
verticalCentered: false

Note: Adding lockAnchors: false, to above list still results in jumpy behavior

[alvarotrigo]

@deepfriedfilth I'm not able to reproduce your issue.
Can you reproduce it on the scrollbar example page? That's using by default lockAnchors:false.

[deepfriedfilth]

@alvarotrigo seems to be resolved when I pull in latest dev version of JS (3.0.5) to the scrollbar example page...

Could've just been a cache hiccup, I suppose. ¯\_(ツ)_/¯
Will try to rebuild exact conditions to test and report back if able to reproduce.

[alvarotrigo]

@deepfriedfilth awesome!

[SulphurDioxide]

I found this solution via #2362 which looks to be the same issue except now this feature is enabled by default in Chrome 73.

[alvarotrigo]

@SulphurDioxide the issue has been solved so nothing to worry about now :)

[n0umankhan]

@alvarotrigo dude I can see this issue still exists in react-fullpage can we update fullpage js there as well?

[n0umankhan]

for a temporary fix we can use below code:

window.addEventListener( 'wheel', event => { event.preventDefault(); }, { passive: false } );

[alvarotrigo]

@n0umankhan thanks for the heads up!
I've updated the extensions file on the react wrapper too. Please use the dist files from the dev branch.

I'll merge them into the master next week when I publish fullPage.js 3.0.5.

[alvarotrigo]

This issue has been fixed in the latest fullPage.js release 3.0.5!

[n0umankhan]

@alvarotrigo hi release is published now?

[alvarotrigo]

Yes

[alvarotrigo]

You can always check it in the docs on the top left where the version number is displayed.

Or directly in npm :)

[n0umankhan]

Thank you for the help and kindness, I'm not sure what's wrong here I'm still facing same error in my react-app

[alvarotrigo]

Make sure to update to the latest react-fullpage version 0.1.14

[alvarotrigo]

If you check the online demo you'll notice the error doesn't take place there anymore.
Make sure you are not caching the JS files.

[n0umankhan]

Hurray Thanks it works now with 0.1.14

[engerguedez]

Hi, I have a problem.

When you are scrolling up, it does not take the entire section. Somebody could help me?

[alvarotrigo]

When you are scrolling up, it does not take the entire section. Somebody could help me?

Please provide an isolated reproduction in jsfiddle or codepen, with no CSS or JS files external to fullPage.js and the minimum amount of HTML code. Use empty sections unless strictly necessary for the reproduction.

Perhaps you might find useful to read my article regarding how to create isolated reproductions.