Wikiki / bulma-carousel

Display a carousel
MIT License
136 stars 99 forks source link

Consider marking event handler as 'passive'? #37

Closed RickCogley closed 6 years ago

RickCogley commented 6 years ago

Thank you for your work. I am using the latest extensions, and noticed on my site that scrolling is sluggish on mobile. When I try to swipe up or down on pages like this, https://esolia.com/helpdesk/, the site is not so responsive to my finger swiping, for some reason. It works, but it is like there is a "resistance" to the swiping.

I notice in the console this sort of error I pasted below, and wonder if it's relevant and if there is anything to be done?

Kind regards Rick

[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See <URL>
bulma-quickview.js:40 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ bulma-quickview.js:40
(anonymous) @ bulma-quickview.js:39
(anonymous) @ bulma-quickview.js:35
bulma-quickview.js:55 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ bulma-quickview.js:55
(anonymous) @ bulma-quickview.js:54
(anonymous) @ bulma-quickview.js:50
bulma-carousel.js:270 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ bulma-carousel.js:270
_bindEvents @ bulma-carousel.js:269
init @ bulma-carousel.js:235
Carousel @ bulma-carousel.js:147
(anonymous) @ bulma-carousel.js:161
bulma-carousel.js:283 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ bulma-carousel.js:283
_bindEvents @ bulma-carousel.js:282
init @ bulma-carousel.js:235
Carousel @ bulma-carousel.js:147
(anonymous) @ bulma-carousel.js:161
bulma-carousel.js:295 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
RickCogley commented 6 years ago

Thank you @Wikiki. I upgraded to bulma-carousel 2.0.14 and tested. When I view this page in Chrome's "responsive" mode so it's set like a mobile device (https://esolia.com/helpdesk/), on loading I see:

bulma-quickview.js:40 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ bulma-quickview.js:40
(anonymous) @ bulma-quickview.js:39
(anonymous) @ bulma-quickview.js:35
bulma-quickview.js:55 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ bulma-quickview.js:55
(anonymous) @ bulma-quickview.js:54
(anonymous) @ bulma-quickview.js:50

Then when I click the right-facing overlay arrow-button, I get:

bulma-carousel.js:302 Unable to preventDefault inside passive event listener invocation.
_this8.nextControl.addEventListener.supportsPassive.passive @ bulma-carousel.js:302
bulma-carousel.js:385 Unable to preventDefault inside passive event listener invocation.
_swipeStart @ bulma-carousel.js:385
carousel.addEventListener.supportsPassive.passive @ bulma-carousel.js:314
bulma-carousel.js:409 Unable to preventDefault inside passive event listener invocation.
_swipeEnd @ bulma-carousel.js:409
carousel.addEventListener.supportsPassive.passive @ bulma-carousel.js:322
bulma-carousel.js:302 Unable to preventDefault inside passive event listener invocation.
_this8.nextControl.addEventListener.supportsPassive.passive @ bulma-carousel.js:302

I'm also seeing what I think is a similar thing for bulma-quickview. On this page (https://esolia.com/management-team/), and on other pages I use quickview, looking at Chrome console:

bulma-quickview.js:40 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ bulma-quickview.js:40
(anonymous) @ bulma-quickview.js:39
(anonymous) @ bulma-quickview.js:35
bulma-quickview.js:55 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ bulma-quickview.js:55
(anonymous) @ bulma-quickview.js:54
(anonymous) @ bulma-quickview.js:50
[Violation] Forced reflow while executing JavaScript took 59ms

I'm hoping this is not a cached version or something. I did clear my cache to make sure.

RickCogley commented 6 years ago

Yeah, looks like I do have the right script. I see from your commit what code you added, and the version being used has it.

jrc screenshot 2018-05-15 at 7 55 44
Wikiki commented 6 years ago

Hi, only carousel has been fixed currently. I'll work on quickview this weekend.