Event Listener Violation

[rs200x]

Once integrated the ng5-slider I'm getting a lot of event listener violation messages within Chrome console .

zone.js:1666 [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

The slider is used like this:

<ng5-slider [value]="port.speed" [options]="defaultOptions" (userChangeEnd)="onSpeedChange($event,port)"></ng5-slider>


defaultOptions: Options = {
    floor: 0,
    ceil: 255,
    step: 1,
    noSwitching: true
  };

Is this expected behavior?

[jlbeard84]

I wonder if this could be related to an issue that I'm finding with the component; I haven't had the time to dig deep into it yet and for us it's an edge case.

We have a page with a single ng5-slider on it, oriented vertically. One of our QA testers hammered on the component, tapping both the top and bottom of the slider alternating and in rapid succession. It holds up for a bit but then (from what I'm guessing is due to an overload of events) freezes the page.

Again, for this this is very edge case, but when I have time I may fork this and try to see if making the event passive fixes this behavior.

[piotrdz]

@rs200x I haven't come across this warning in Chrome, but from what I see, this is a performance warning, which if implemented, should improve scroll latency. There is one or two places where I could make the event listener passive, but I don't know if that would improve performance and by how much.

It's also possible that your custom event handler onSpeedChange is causing this issue. This handler will be invoked on every change caused by the touch event, and that can add considerable latency.

@jlbeard84 Props to your QA tester, that's certainly more testing than I'm doing with the slider. It is possible that something gets overloaded when you really hammer it with events. But I'll need to replicate this first to say more about it.

[rs200x]

@piotrdz even if I remove the event handler I get those warnings. I'm also not doing any specific user interactions. They get thrown right after view generation and data binding.

[piotrdz]

@rs200x Ok, so these would be warnings related to slider's internal event handlers. I still wonder if that's having negative performance effects. Are you seeing degraded scroll performance like in this video? Because if not, I'd say these warnings would be false positives.

[fi3te]

I have the same issue even without the usage of any input or output.

[piotrdz]

I made some changes to touch event listeners in v1.1.5. Is the issue still occurring? I still haven't been able to reproduce it.

[fi3te]

Yes. Also the usage of an empty ng5-slider tag produces violation messages.
I've created a branch (ng5-slider-issue) with a slider placed on the login page to demonstrate this issue:
https://github.com/fi3te/jenkins-hue-ui

Browser:
Chromium 70.0.3538.77 (64 bit)

[piotrdz]

@fi3te: Thanks, I finally figured it out. I had my Chrome Developer Tools console filter set to Default all this time. Once I changed it to All Levels, this showed me the warnings about event listener violation.

I researched the topic a little more and I found a relatively easy solution to use passive event listeners, if the browser supports them. This prevents these warnings from showing up and it should also improve scrolling performance on mobile devices.

[piotrdz]

Closing as fixed with v1.1.6 release.

[fi3te]

Thank you 😃

[rs200x]

Its also fixed for me!
Thx :-)

[vivekfamcominc]

Also fixed for me thanks :)