A fix for Screen overlaying issue with Cordova + Angular app

Issue

I've got an app developed with AngularJS + Cordova/Ionic. System set up:

• AngularJS
• Cordova 9
• Ionic 1

The issue:
The app is basically an online shop where you have different product groups. You can go inside the group and choose a product there. After a few page navigations, when I navigate to the previous page, the of the things happens:

• A previous in the navigation stack overlays half of the screen of the current page.
• Current page duplicates and overlays on the previous page. When it happens, both of the screens are available and you can scroll for example.

The issue appears on iPhone X and higher only. Android works fine.

What I found in internet didn't give me a clear answer about this issue and how to solve it. Here are the links for resources:

• Ionic app back button causes previous state screens to overlap

• https://forum.ionicframework.com/t/ionic-iphone-screen-overlap-on-page-navigation/37900/15

• Content overlaps in Ionic 1 app for IOS version 11 and above

Could you help me to find the reason? Thank you

Solution

After a long time, the solution was found. In my case, it was a cache issue

when initiating app config you set $ionicConfigProvider.views.maxCache(XXX);

maxCache(3) was an optimal number for me and now it works without any issues

Answered By - Nikita Basharkin