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 · 27 comments
Closed

Flickering error on Google Chrome 73 #3600

iochoaveiss opened this issue Mar 15, 2019 · 27 comments

Comments

@iochoaveiss
Copy link

@iochoaveiss iochoaveiss 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
Copy link

@arsik arsik 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
Copy link
Author

@iochoaveiss iochoaveiss 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
Copy link
Owner

@alvarotrigo alvarotrigo commented Mar 15, 2019

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

@arsik
Copy link

@arsik arsik 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
Copy link
Author

@iochoaveiss iochoaveiss commented Mar 15, 2019

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

@alvarotrigo
Copy link
Owner

@alvarotrigo alvarotrigo 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
Copy link
Author

@iochoaveiss iochoaveiss commented Mar 15, 2019

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

@alvarotrigo
Copy link
Owner

@alvarotrigo alvarotrigo commented Mar 15, 2019

No problem! 😉

@deepfriedfilth
Copy link

@deepfriedfilth deepfriedfilth 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
Copy link
Owner

@alvarotrigo alvarotrigo 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
Copy link

@deepfriedfilth deepfriedfilth 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
Copy link
Owner

@alvarotrigo alvarotrigo commented Mar 27, 2019

@deepfriedfilth awesome!

@SulphurDioxide
Copy link
Contributor

@SulphurDioxide SulphurDioxide 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
Copy link
Owner

@alvarotrigo alvarotrigo commented Mar 28, 2019

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

@n0umankhan
Copy link

@n0umankhan n0umankhan 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
Copy link

@n0umankhan n0umankhan commented Mar 29, 2019

for a temporary fix we can use below code:

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

@alvarotrigo
Copy link
Owner

@alvarotrigo alvarotrigo 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
Copy link
Owner

@alvarotrigo alvarotrigo commented Apr 12, 2019

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

@n0umankhan
Copy link

@n0umankhan n0umankhan commented Apr 12, 2019

@alvarotrigo hi release is published now?

@alvarotrigo
Copy link
Owner

@alvarotrigo alvarotrigo commented Apr 12, 2019

Yes

@alvarotrigo
Copy link
Owner

@alvarotrigo alvarotrigo 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
Copy link

@n0umankhan n0umankhan 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
Copy link
Owner

@alvarotrigo alvarotrigo commented Apr 12, 2019

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

@alvarotrigo
Copy link
Owner

@alvarotrigo alvarotrigo 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
Copy link

@n0umankhan n0umankhan commented Apr 12, 2019

Hurray Thanks it works now with 0.1.14

@engerguedez
Copy link

@engerguedez engerguedez commented Aug 15, 2019

Hi, I have a problem.

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

@alvarotrigo
Copy link
Owner

@alvarotrigo alvarotrigo commented Aug 16, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
7 participants