So what to do? Weirdly I couldn't reproduce in browserstack either. But clearly mine doesn't and neither the ones in Browserstack. We were using preventDefault to allow items to be dropped on the canvas. When you add a touch event with a {passive: true} object as the third parameter in your event handler then you are telling the browser that the touchstart listener will not call preventDefault() and the browser can safely perform the scroll without blocking on the listener.
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). You signed in with another tab or window.
Specific code block with preventDefault in question was this basic one: It was attached to the canvas div block using Vue v-on directives @dragenter="blockEvent" @dragover="blockEvent" – more on html drag and drop api here. See https://www.chromestatus.com/features/5093566007214080. I'm running Mac OsX Sierra with latest chrome. Hopefully the change will be smooth for the fullPage.js :). What version of Chrome are you using? GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together. Unable to preventDefault inside passive event listener invocation. Unable to preventDefault inside passive event listener invocation. So as said we were told we were using a scroll blocking event and that this would slow dow the app’s experience. Unable to preventDefault inside passive event listener (...). Tested in the latest Chrome 54.0.2840.59 m for Windows and Mac. But now that we added the default passive is true to events the preventDefault function no longer worked disallowing us to drop elements on the canvas. See https://www.chromestatus.com/features/5093566007214080 It's happening on the demo page. to your account. While it is totally possible to directly access the document object and hook up some listener, it is not suggested. This function entails the following:
By clicking “Sign up for GitHub”, you agree to our terms of service and In fact, this is why this other fullPage.js issue was raised. .
PS: and scroll by dragging, not mousewheel. And this warning we got related to a TinyMCE implementation. We have been working on making our Laravel / Vue / JS app more efficient and smoother. Dragging with the mouse. Unable to preventDefault inside passive event listener due to target being treated as passive. 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.
This will fix: According to Chrome docs events are treated as passive by default. Listening to Angular Key Events with Host Listeners. Laravel Provisioning and Deployment – What are your options. But we've decided to try launching this behavior to all users in Chrome 56. Unable to preventDefault. It seems your Chrome is interpreting the event listener as passive. The reason we added this as dropping an element into another is not possible by default (w3 schools basics on this). Cory Rylan. This was referenced on Aug 24, 2017 Use passive listeners to improve scrolling performance angular/zone.js#790 The event continues to propagate as usual, unless one of its event listeners calls stopPropagation() or stopImmediatePropagation(), either of which terminates propagation at once. Learn how to listen to keyboard events with Angular and the Host Listener API. So trying on current Chrome dev channel I see it reproduces reliably. Follow @coryrylan. In more complex cases it may be necessary to also rely on one of the following: Jasper has been working with web frameworks and applications such as Laravel, Magento and his favorite CMS WordPress including Roots Trellis and Sage for more than a decade. Let me quote from a Google Developer blog post here: If you call preventDefault() in the touchstart or first touchmove events then you will prevent scrolling.
We'll try to get that fixed in Chrome 56. However, snippet is only a temporary solution (hopefully) until Angular will not support Passive Event Listener. Successfully merging a pull request may close this issue. Here's a video: https://drive.google.com/open?id=0B43KK3gJHYn4STNmTG5RZ1hHakU If you wish to prevent all browser scrolling and zooming within an element apply touch-action: none to it. @RByers thanks for the insight! When Jasper is not coding, marketing a website, reading about the web or dreaming the internet of things he plays with his son, travels or run a few blocks.
It looks like it's caused by the preventBouncing() function.