Cordova/Onsen UI: CSS distortion in app

[Stephane]

We built a hybrid mobile application with cordova and onsen UI tested and it works perfectly on the browser but when we run the app on a device (running android 6.1), the pages overlap each other with some elements in the page not displaying. After some times it comes back to normal.
Please can anyone help us. i do not understand what is wrong. the debugger gives not error so i think its a css issue or the platform settings. Below are some pictures of the pages overlapping each other.

[Fran Diox]

@Stephane Need some code to help. Can you make a small example? I haven’t seen this before :/ Perhaps something related to the way you initially load the pages?

[Stephane]

@Fran-Diox thanks i’ll check the the page loaders. i use angular js. sorry the app is too big ill show you some code. when tha app loads i initialise the pages as thus:

$scope.Login = function(){
myNavigator.resetToPage('recent.html');
}

then i have a slide menu defined as :

app.controller('SlidingMenuController', ['$scope',  '$timeout', function($scope,  $timeout) {
this.load = function(page) {
             $scope.menu.content.load(page);
             $scope.menu.left.close();
         };

         this.toggle = function() {
             $scope.menu.left.toggle();
         };

 $scope.pushNewPage = function(pageUrl, index) {          
                 myNavigator.bringPageTop(pageUrl, { animation: 'none' }).then(function() {
                     $scope.menu.left.close();
                 });          
         }

}]);

and my menu

<ons-page>
    <ons-list>
        <ons-list-item class="list-custom__height">
            <div class="left list-item-remove-padding"><ons-icon icon="ion-android-menu"></ons-icon></div>
            <div class="center list-item-remove-padding">MENU</div>
        </ons-list-item>
        <ons-list-item class="list-custom__height" ng-click="pushNewPage('home.html')" tappable>
            <div class="left list-item-remove-padding"><ons-icon icon="ion-android-home" class="list-item__icon"></ons-icon></div>
            <div class="center list-item-remove-padding">Home</div>
        </ons-list-item>
        <ons-list-item class="list-custom__height" ng-click="pushNewPage('chat.html')" tappable>
            <div class="left list-item-remove-padding"><ons-icon icon="ion-network" class="list-item__icon"></ons-icon></div>
            <div class="center list-item-remove-padding">Chat</div>
        </ons-list-item>
        <ons-list-item class="list-custom__height" ng-click="pushNewPage('company.html')" tappable>
            <div class="left list-item-remove-padding"><ons-icon icon="ion-android-map" class="list-item__icon"></ons-icon></div>
            <div class="center list-item-remove-padding">Company</div>
        </ons-list-item>
        <ons-list-item class="list-custom__height" ng-click="pushNewPage('newMessage.html')" tappable>
            <div class="left list-item-remove-padding"><ons-icon icon="ion-android-create" class="list-item__icon"></ons-icon></div>
            <div class="center list-item-remove-padding">New Message</div>
        </ons-list-item>
        <ons-list-item class="list-custom__height" ng-click="pushNewPage('profilePage.html')" tappable>
            <div class="left list-item-remove-padding"><ons-icon icon="ion-person" class="list-item__icon"></ons-icon></div>
            <div class="center list-item-remove-padding">My Profile</div>
        </ons-list-item>
        <ons-list-item class="list-custom__height" ng-click="pushNewPage('about.html')" tappable>
            <div class="left list-item-remove-padding"><ons-icon icon="ion-android-contacts" class="list-item__icon"></ons-icon></div>
            <div class="center list-item-remove-padding">About</div>
        </ons-list-item>
        <ons-list-item class="list-custom__height" ng-click="signOut()">
            <div class="left list-item-remove-padding"><ons-icon icon="ion-log-out" class="list-item__icon"></ons-icon></div>
            <div class="center list-item-remove-padding">Sign out</div>
        </ons-list-item>     
</ons-page>

and in one of the pages:

<ons-page modifier="custom-page-view">
    <ons-toolbar>
        <div class="custom-center">
            <div class="custom-center-1">
                <div><img class="header-applogo" src="img/Logo_Icon.png" alt=""></div>
                <div class=" header-appname">About</div>
            </div>
        </div>
    </ons-toolbar>
    <div>
        <!-- Shortcut Menu -->
        <div class="menu-block moveMenu">
            <div ng-controller="SlidingMenuController">
                <img class="com-btn" src="img/home/shortcut_btn_com.png" alt="combutton" ng-click="pushNewPage('home.html');" />
                <img class="map-btn" src="img/home/shortcut_btn_map.png"  ng-click="pushNewPage('newMessage.html');" />
                <img class="menu-btn" src="img/home/shortcut_btn_menu.png" alt="menu button" ng-click="slidingMenu.toggle()" />
            </div>
        </div>
    </div>
    <div style="text-align:center; margin-top: 50px">
        <ol>
            <h3 style="font-style: italic;">Safe Room</h3>
            <li>            
                <div>
                    <span class="list-item__subtitle">Version: 1.0<br></span>
                    <span class="list-item__subtitle">Meet me</span>
                </div>
            </li>
        </ol>
        <ons-button ng-click="myNavigator.pushPage('feedback.html', {animation: 'slide'});" modifier="light">FEEDBACK</ons-button>
        <h4 style="text-decoration: blink;color: cornflowerblue;margin-top: 10px">LICENSES</h4>
    </div>
    <div style="text-align: center;position: relative;bottom: 5px;">
        <label class="radio-button" style="font-size: 15px;">
            <u ng-click="myNavigator.pushPage('TermsAndConditions.html', {animation: 'slide'});">Terms</u> and <u ng-click="myNavigator.pushPage('Terms
* undefinedAndConditions.html', {animation: 'slide'});">Conditions</u>
        </label>
    </div>

i might not have given much info but ill appreciate any help.

[Stephane]

it seems as the function :

  myNavigator.bringPageTop(pageUrl, { animation: 'none' }).then(function() {
                     $scope.menu.left.close();
                 });

Doesn’t work properly in my app. I noticed that by changing the function bringPageTop with replacePage . Maybe the bringPageTop () has a problem or didn’t use it in a right way. My main aim of using it was to enable the users to go back to the previous page in the stack by pressing the back button on the phone. Please is there a way i can do this?

[Fran Diox]

@Stephane Hmm, that should be done automatically by ons-navigator. Have a look at this example, push a page and then press ESC (it simulates Android’s back button). It requires cordova.js to be included in index.html when you are on the actual device. Otherwise, can’t you just use popPage?

[Stephane]

@Fran-Diox i tried to load the example on my phone and when i pressed the back button after i tapped Push Page button, instead of moving to the previous page it exits the app.

[Stephane]

Hello i need help on this distortion happening in my app i have different pages super imposing on each other. For example these are 2 pages super imposing on each other and everything becomes distorted. this happens also on other pages too. i tries your method @Fran-Diox proposed but it didn’t work. This is an example :

[jamal]

@Stephane, without seeing your code, I am going to guess:
Either:

1. You have missing HTML tags somewhere which are confusing the rendering process of your pages
   Or:
2. The page stack got messed up by some method.

You may have to start from scratch and gradually add code to see what is causing the issue.

[Stephane]

@jamal thanks you. i think ill follow your advice and check my tags… if it doesn’t work ill rebuild the app.