Materialize: Use passive event listeners

[NathanUrwin]

https://developers.google.com/web/tools/lighthouse/audits/passive-event-listeners

7711            view[0].addEventListener('touchstart', tap, {passive: true});
7712            view[0].addEventListener('touchmove', drag, {passive: true});

[DanielRuf]

However, in browsers that do not support passive event listeners, the third parameter is a boolean to indicate whether the event should bubble or capture. So, using the syntax above may cause unintended consequences.

See the polyfill in Feature Detection to learn how to safely implement passive event listeners.

http://caniuse.com/#feat=passive-event-listener

Generally a pull request with the needed changes would be great.

Do you know if there is some CI solution for Lighthouse so we could see a full audit and check each commit and PR with it?

[NathanUrwin]

@DanielRuf I am not a JavaScript developer myself, but if I have the time I will definitely make that pull request!

I just now noticed the supported browsers, so it seems a polyfill or feature detection would need to be implemented. According to these docs, that could be achieved relatively simply like so:

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

view[0].addEventListener('touchstart', tap, supportsPassive ? { passive: true } : false);
view[0].addEventListener('touchmove', drag, supportsPassive ? { passive: true } : false);

Yeah there is definitely a Lighthouse CLI, but it is just a wrapper for launching Chrome. Although headless support just shipped with Chrome 59!

I am on Debian Linux, so I have been unable to get it to work. There is a docker image with a headless Chrome I still need to try though!

[DanielRuf]

Probably https://github.com/ebidel/lighthouse-ci might be useful in the future.

[NathanUrwin]

@DanielRuf Sorry, I misinterpreted CI as "Command (Line) Interface" instead of the intended "Continuous Integration". Great find though!

[Dogfalo]

We don't want to add polyfills for this, so when support for this improves we will consider supporting it

[Fauxil-Fox]

Any reconsiderations? @Dogfalo

[styfle]

I am trying out materialize 1.0.0 and getting this warning in Chrome 69 when using the sidenav feature.

It looks like the passive option is pretty well supported by every browser.

[Dogfalo]

IE doesn't support it, which for the time being we are still supporting

[ray007]

But supporting IE should not mean making all other browsers do worse than they could...

[dargmuesli]

To me this seems like an improvement for all other browsers. IE can stick to (not) support whatever it wants, for all other browsers passive event listeners should be used if that's possible.

[MicheleLucini]

UP

[gabrielima]

It has been almost 2 years since this was opened. Any reconsiderations on this issue ? @Dogfalo

[ghost]

What if we removed all legacy support from the base framework, allowing us to work with the most up-to-date tools. Then move legacy support (including IE) to distinct micro-libraries that developers can choose to use or not. (Similar to the way D3 can be easily "Frankensteined" into just the pieces you need) Loading the library might look something like

<!-- This by itself only supports modern browsers-->
<script src="./vendor/materialize/materialize.min.js"></script>
<!-- This adds IE support-->
<script src="./vendor/materialize/materialize.ie.min.js"></script>

The same concept could work for styles and polyfills.

By modularizing the library in this way we can leave the legacy support to those who need/care about it, and improve performance for those who don't.

[DanielRuf]

This is still valid:
https://github.com/Dogfalo/materialize/issues/4720#issuecomment-335909670

v1 still supports IE.

[Smankusors]

in case anyone wondering, there's pull request for this. #6466