Improving performance of events on SVG on mobile - Hammer 2.0, Materialise, Jquery

41
February 14, 2019, at 04:00 AM

I have an app that registers events to svg elements.

I am using MaterializeCSS 1.0, which wraps Hammer2.0.4, and make use Jquery.

I registered tap events like this, and after reading: https://developers.google.com/web/updates/2017/01/scrolling-intervention

I try not to call preventDefault():

 Hammer(ui).on('tap', function (event) {
          // Hammer handling event => events are objects
          event.srcEvent.stopPropagation();
          // event.srcEvent.preventDefault();
          event.srcEvent.cancelBubble  = true;
          // event.preventDefault();
          if(event.stopPropagation) event.stopPropagation();
          else event.cancelBubble=true;
          // alert('yo');
          highlightNode(node.id);
          ....// rest of the code, with Async promises)
}, false)  // => passing false

function highlightNode(nodeId) {
  // remove the class currentNodeMarker => note, the array to cycle through is always length 1 
  var els = document.getElementsByClassName("currentNodeMarker");
  for (var i = els.length - 1; i >= 0; i--) {
    els[i].classList.remove('currentNodeMarker');
  }
  // add class to the child 'circle' of my element
  var circle = document.getElementById('data-' + nodeId).getElementsByClassName("node-circle")[0];
  circle.classList.add('currentNodeMarker');
};
}

the CSS holds a small transition:

circle {
   transition: all 0.2s
}

the function I want to be executed immediately is highlightNode(), that notify the user his gesture has been taken into account.

I see the event is captured immediately (alert('yo')) , but the highlightNode() seems to run even after the promises are resolved:

There is a lag in mobile, much noticeable.

Now, I don't know if is a "normal" beahavior, in the sense that the function is executed straight away and it is just the renderer engine of the browser that is taking a while to style the element.

Is it this a possible cause?

Or is it related topic to lack of passive : true - https://github.com/hammerjs/hammer.js/pull/987 ?

I thought about it because of alert from Chrome: [Violation] 'pointerUp' from Materialize (which should listen to event from Hammer) - although the warning does not fire always. But the lag between the touch action and the visual styling is there, anyway.

How could I improve my code so that the user is notified of a "visual" action immediately in mobile?

How can I improve responsiveness to be sure events are handled properly, as example according to new features {passive : true } , or not listened multiple times by jquery, Hammmer and Materialize making use of them?

P.S.

I am aware of Performance tab in Chrome, but it does not work to evaluate a connected device - it crash :/ So please consider alternate suggestion to debug events.

READ ALSO
Works in postman bu not work with axios vuejs

Works in postman bu not work with axios vuejs

everyoneI write this code but it doesn't work correctly

49
How can i create a separate folder in REACT for my Axios routes, that are connected to my node.js

How can i create a separate folder in REACT for my Axios routes, that are connected to my node.js

Hello I trying to create a separate folder for my axios routesI do not want them inside of my components file in React

33
running docker container is not reachable by browser

running docker container is not reachable by browser

I started to work with dockerI dockerized simple node

63
Parse specific table to array of strings Jsoup

Parse specific table to array of strings Jsoup

i have this, rather complex html I want to parse using JSoupI have tried several things, but none is working

35