I have finished my Angular app (simple reservation application) and everything works just fine in Desktop browsers.

Then of course started testing remotely on mobile browsers (mainly Android Chrome and Firefox) and encountered strange problem.

For example when I filter view to the Table 3 and then start scrolling this view with touch screen of my cell phone ... this view gets immediately rested to the default (user sees again table 1 and table 2).

For better understanding this problem I have attached video. Mobile Screen Pan Problem

I will mention that this problem persist only on mobile browsers.

I'm using Angular directive *ngIf to filter my view ... and view is based on array. (after user clicks Pick and then choses table 3 to display, rest column of an array gets nulled and skipped by *ngIf during template parse)

There are no errors in debug chrome console.

Any ideas what may be wrong ?

CodePudding user response：

You have to check the condition on ngIf. Maybe for some reasons it changes on scroll (e.g. an event listener on table)

CodePudding user response：

From the looks of your video, in the background reslayout.component.ts:56 is flickering - resetting perhaps? Something async resetting your selection on Pick dropdown. Also for mobile and desktop views it's better to use responsive layout (e.g Bootstrap). https://ng-bootstrap.github.io/#/components/table/overview