vasturiano / globe.gl

UI component for Globe Data Visualization using ThreeJS/WebGL
https://vasturiano.github.io/globe.gl/example/world-population/
MIT License
2.03k stars 301 forks source link

Using passive event listeners #22

Open robinschreiner opened 3 years ago

robinschreiner commented 3 years ago

Describe the bug GlobeGL is not using passive event listeners. This affects the page's scroll performance and also throws errors in lighthouse reports.

To Reproduce Steps to reproduce the behavior:

  1. Start Lighthouse audit of website
  2. See result ;)

Expected behavior Using passive event listeners

Screenshots Bildschirmfoto 2020-09-11 um 10 42 49

vasturiano commented 3 years ago

@robinschreiner thanks for reaching out.

I believe this refers to the pointer event handlers included by ThreeJs TrackballControls (a dependency of Globe.gl to handle the globe rotation/zoom interactions).

You can see the events being added here, and indeed they are not passive. It seems intentional as the handlers perform preventDefault operations, but I can't fully speak for the implementation in that lib. https://github.com/mrdoob/three.js/blob/696d7836d1fc56c4702a475e6991c4adef7357f4/examples/jsm/controls/TrackballControls.js#L731-L736