Material list does not scroll in mobile devices

Question

I am using mat-list and I can't scroll it on mobile devices.

It is a mat-nav-list with some mat-list-item inside, the structure of my list is something like:

<mat-nav-list>
   <a mat-list-item matTooltip="dashboard" routerLink="/dashboard">
     <mat-icon matListIcon>dashboard</mat-icon>
   </a>
   ...
</mat-nav-list>

I can scroll normally in desktop with the mouse but when I am in a mobile browser I see every mat-list-item with this:

element.style {
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

Is the browser applies that CSS itself? If I try to override with inline style nothing change, how can I solve it?

Answer 1

In my case, the CSS style came from mat-list-item. So the only thing I can do is to override it directly.

[mat-list-item]{
  touch-action: auto !important;
}