Angular Material touch screen scrolling issues

Question

I have several places in my Angular Material application that do not seem to scroll on mobile touchscreen devices. Mat-buttons seem to be the issue but not in every case.

• For example, I have a responsive button component that does not scroll horizontally on mobile. The scroll bar shows, but the buttons won't allow touch scrolling.
• This is the same on my mat-tables. I have a column for CRUD operations that use mat-icon-buttons. This is the only part of the table that will not allow scrolling when the user's touch it.
• My main SideNav also does not scroll vertically when collapsed. I collapse it down to a list of mat-list-items with mat-icons.

It is weird because anytime I create a new project or stackblitz to recreate this effect, it does not happen.

Here is a dumbed down version of my responsive button component with the same html and css structure: Blitz. If you use your browser's built in responsive viewer it should scroll just fine.

I have even copied the exact code from that blitz into my application and it does not work properly. It just refuses to scroll on touch no matter where I put it / what I change.

If I remove the mat-*******-button from the buttons in my app, everything works as expected. It seems to be an issue with certain directives maybe?

Answer 1

For anyone else experiencing this issue, track it here: Issue

After lots and lots of trial and error I found that mat-tooltips are to blame for this behavior. Apparently this has been a serious issue since mid-2017. Removing them solves the problem, but that is not really a proper fix. There is a work around posted in the issue on GitHub I am going to try out.

EDIT:

I could not get the workaround solution to work. Leave a comment on this answer or the GitHub thread if an alternative is found.