4

I am facing a performance issue in my angularjs application using angular material.

I have an <md-select> with many options (around 1300) and this <md-select> is in an <md-tab> tag. On the page load, my page freezes. This is probably due to Google Chrome's event passive listener, because I get the following log in my js console :

[Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

You can find a codepen which reproduces my issue : https://codepen.io/jjalal/pen/vWxYbv. When switching from Harry to John the page freezes (it is way more obvious on my application). If you open the js log and set the log level to 'All levels' (enable verbose level), you can see the 3000 logs (I have 3 select with 1000 options each).

I saw on some answers that I should set the event passive to true like this :

document.addEventListener('touchmove', function(e) {
    e.preventDefault();
}, { passive: true });

But this didn't solve my issue.

Any help would be appreciated.

Jeremy
  • 41
  • 1
  • 3

1 Answers1

4

Very recently (two days ago) had a very similar issue and after hours of research I had to realize that this is something that won't be fixed in the near future. Please refer to this question and the accepted answer for explanation. (And also check out the angularjs github issue which has a tag 'won't fix')

Regarding a kind-of solution:

The problem is 100% with the browser (don't even try it in IE, it will freeze with a note 'long running script') and the DOM rendering and not in your code. So I kept trying and trying and trying, removed tiny parts of the DOM (complete container divs, buttons, paragraphs, whatever I could find) one by one. At one point I was able to identify what caused the issue. I had an item that was draggable which contained a clickable md-icon and that icon had an on-hover md-tooltip. Now you see it had 3 events (dragging the item, clicking on the button and hovering the button) which collided. After removing the md-tooltip it worked like a charm. My suggestion is for you to start identifying what exactly could be causing this. The real solution will have to wait...

Andrew Adam
  • 1,572
  • 9
  • 22