Fullpage.js: Unable to preventDefault inside passive event listener (...)

[reddo]

Getting the following error in chrome dev. tools while scrolling:

Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

It's happening on the demo page.

Open the demo page, bring up chrome dev tools, set to responsive mode and select ipad as device and turn it to portrait mode and drag to next section.

See screenshot attached:

It looks like it's caused by the preventBouncing() function.

[alvarotrigo]

I'm not able to reproduce it in the demo page.
Tested in the latest Chrome 54.0.2840.59 m for Windows and Mac.

What version of Chrome are you using? If you are using Canari, that's a developers version which can contain bugs and therefore support for it is not provided.

[reddo]

Chrome v. 54.0.2840.71 - latest stable. Have you set your renderer to tablet as in the screenshot?

PS: and scroll by dragging, not mousewheel.

[alvarotrigo]

Yeap, tried the responsive and the iPad view. No luck. Dragging with the mouse.
You can test it yourself in www.browserstack.com Mac and Windows. Clean console.

[alvarotrigo]

I noticed on the Chrome dev tools, in the bar where the iPad device is selected. You have something next to the rotate icon saying "Mobile".
I can't see that in my Chrome for Windows and neither in the ones in Browserstack.com.

[reddo]

That's not important, that's just a setting. Here's a video: https://drive.google.com/open?id=0B43KK3gJHYn4STNmTG5RZ1hHakU
Weirdly I couldn't reproduce in browserstack either. I'm running Mac OsX Sierra with latest chrome.

[alvarotrigo]

@reddo possible related with this topic and therefore with this issue in Chrome issues tracker.

According to Chrome docs events are treated as passive by default. In fact, this is why this other fullPage.js issue was raised.
It seems your Chrome is interpreting the event listener as passive. But clearly mine doesn't and neither the ones in Browserstack. I would say that a default installation of Chrome wouldn't treat events by default as passive.

So the problem is clearly in your Chrome.
Check out this docs and see how you can change the default behaviour of Chrome for passive events by accessing your chrome flags: chrome://flags and changing the property Passive Event Listener Override to Default.

[RByers]

What you're seeing is probably the result of an experiment @dtapuska ran on a tiny subset of Chrome users, sorry for the confusion, we know such experiments make the platform less predictable).

But we've decided to try launching this behavior to all users in Chrome 56. So trying on current Chrome dev channel I see it reproduces reliably. We're working on a blog post for this, but the short answer is to use the touch-action CSS property to indicate declaratively where you don't want scrolling to occur, and then avoid calling preventDefault when you see TouchEvent.cancelable is false (it's guaranteed to be a no-op).

[RByers]

Oh, I see the fullpage div already has touch-action: none (as is already required to work well on Edge) so really the warning is entirely noise in your case. We'll try to get that fixed in Chrome 56.

[alvarotrigo]

@RByers thanks for the insight! Hopefully the change will be smooth for the fullPage.js :)

[enesyteam]

This will fix:
document.addEventListener( 'wheel', this.onMouseWheel, {passive: false} );

[vorasudh]

Is this problem solved? Because it seems default Chrome behaviour is to not allow passive event listeners

[alvarotrigo]

@vorasudh yeah it was solved, that's why the issue is not open anymore :)

You can test the fullpage site or any of the other examples online. You shouldn't get any error in the JS console.

Make sure to always use the latest fullpage.js version.