Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flickering error on Google Chrome 73 #3600

Closed
iochoaveiss opened this Issue Mar 15, 2019 · 25 comments

Comments

Projects
None yet
6 participants
@iochoaveiss
Copy link

commented Mar 15, 2019

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

This comment has been minimized.

Copy link

commented Mar 15, 2019

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

This comment has been minimized.

Copy link
Author

commented Mar 15, 2019

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

This comment has been minimized.

Copy link
Owner

commented Mar 15, 2019

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

@alvarotrigo alvarotrigo added the bug label Mar 15, 2019

@arsik

This comment has been minimized.

Copy link

commented Mar 15, 2019

@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

This comment has been minimized.

Copy link
Author

commented Mar 15, 2019

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

@alvarotrigo

This comment has been minimized.

Copy link
Owner

commented Mar 15, 2019

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

It will get merged in the next release.

@iochoaveiss

This comment has been minimized.

Copy link
Author

commented Mar 15, 2019

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

@alvarotrigo

This comment has been minimized.

Copy link
Owner

commented Mar 15, 2019

No problem! 😉

@deepfriedfilth

This comment has been minimized.

Copy link

commented Mar 22, 2019

@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

This comment has been minimized.

Copy link
Owner

commented Mar 27, 2019

@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

This comment has been minimized.

Copy link

commented Mar 27, 2019

@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

This comment has been minimized.

Copy link
Owner

commented Mar 27, 2019

@deepfriedfilth awesome!

@SulphurDioxide

This comment has been minimized.

Copy link

commented Mar 28, 2019

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

This comment has been minimized.

Copy link
Owner

commented Mar 28, 2019

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

@n0umankhan

This comment has been minimized.

Copy link

commented Mar 29, 2019

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

@n0umankhan

This comment has been minimized.

Copy link

commented Mar 29, 2019

for a temporary fix we can use below code:

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

@alvarotrigo

This comment has been minimized.

Copy link
Owner

commented Mar 29, 2019

@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 comment has been minimized.

Copy link
Owner

commented Apr 12, 2019

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

@n0umankhan

This comment has been minimized.

Copy link

commented Apr 12, 2019

@alvarotrigo hi release is published now?

@alvarotrigo

This comment has been minimized.

Copy link
Owner

commented Apr 12, 2019

Yes

@alvarotrigo

This comment has been minimized.

Copy link
Owner

commented Apr 12, 2019

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

Or directly in npm :)

@n0umankhan

This comment has been minimized.

Copy link

commented Apr 12, 2019

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

This comment has been minimized.

Copy link
Owner

commented Apr 12, 2019

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

@alvarotrigo

This comment has been minimized.

Copy link
Owner

commented Apr 12, 2019

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

This comment has been minimized.

Copy link

commented Apr 12, 2019

Hurray Thanks it works now with 0.1.14

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.