CODEWITHSUNDEEP
cssangularangular-material
CAlex
CAlex

Reputation: 1140

Angular Material touch screen scrolling issues

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.

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?

enter image description here

Upvotes: 11

Views: 6006

Answers (2)

Belal Aglan
Belal Aglan

Reputation: 126

this would work in any material version ... in your styles.css

.mat-tooltip-trigger {
  touch-action: auto !important;
}

Upvotes: 2

CAlex
CAlex

Reputation: 1140

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.

Upvotes: 9

Related Questions