To Improve Scrolling Performance add the passive flag to event listener in cs-body.js on line 1572

[diegocanal]

In the unminified version of /pro/cornerstone/assets/dist/js/site/cs-body.js on line 1572, please change:

this.element.addEventListener(t, n, false)

into this:

this.element.addEventListener(t, n, {passive: true})

Here you have –in Google Tools for Web Developers– an article related to this matter to use as reference: Uses Passive Event Listeners to Improve Scrolling Performance

[diegocanal]

One more thing, it might be a good idea to check availability of support for the option parameter in the User Agent before adding the passive flag to the touch event listeners, so the solution would be to add at the very beginning of the file:

var supportsPassive = false;
try {
    var opts = Object.defineProperty({}, 'passive', {
        get: function() {
            supportsPassive = true;
        }
    });
    window.addEventListener("testPassive", null, opts);
    window.removeEventListener("testPassive", null, opts);
} catch (e) {}

And then instead of the code I proposed on my first message, change this:

this.element.addEventListener(t, n, false)

into this:

this.element.addEventListener(t, n, supportsPassive? {passive: true}:false)

[ruenel]

Hello Abarka,

We certainly appreciate the feedback!
We will forward this thread to our developers for further investigation.

Thanks!

[diegocanal]

Hello @RueNel you are very welcome.

By the way, there is this document at GitHub that explains all –the “whys” and “hows”– regarding passive event listeners in depth: https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

Also, a video of a side-by-side comparison that illustrates how different the user experience can be. On the left hand side, without the passive event listeners, at some points the scrolling gets blocked: https://twitter.com/RickByers/status/719736672523407360

[ruenel]

Hey Abarka,

I will forward this response to our developers as well.

Regards.

[alexander]

Hi @CYME,

Thanks for reaching out and sharing this information. It’s definitely something we’ve needed to get in. I’m going to try to prioritize it in our next development cycle (not the upcoming release). We have Modernizr available on the front end so that gives us a way to do feature detection. We’ll probably start by updating all qualifying event handlers in the front end (cs-body,js) then move on to some of them in the builders.

[diegocanal]

Hi @alexander,

That sounds great!

Thanks for sharing the roadmap regarding this matter.

[ruenel]

No problem.
If you need anything else we can help you with, don’t hesitate to open another thread.