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?
