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 ?
Guys I found solution and the problem was related to mobile browsers as I suspected.
My App use on resize browser window event hook to preadjust layout to fit any kind of screen dimensions.
Turns out that when you touch scroll webpage on mobile not only on touch event gets fired but also on resize. That's why scrolling on mobile was resetting view of my app.