I am seeing duplicate views and scroll elements sometimes when i use ionic tab with side menus.
Not able to figure out when exactly it happens but when tab contents go blank…and i see below weird html structure (repetitive elements).
Please note caching view limit is set to 0
Below is the code:
<ion-nav-view class="view-container" nav-view-transition="android" nav-view-direction="none">
<ion-side-menus class="pane view" nav-view="active" style="-webkit-transition: 0ms; transition: 0ms; -webkit-transform: translate3d(0%, 0px, 0px);">
<ion-pane ion-side-menu-content="" class="menu-content pane">
<ion-nav-bar class="bar-stable nav-bar-container hide" nav-bar-transition="android" nav-bar-direction="swap">
<div class="nav-bar-block" nav-bar="active"><ion-header-bar class="bar-stable bar bar-header disable-user-behavior" align-title="center"><div class="buttons buttons-left" style=""></div><div class="title title-center header-item" style="">Profile</div></ion-header-bar></div><div class="nav-bar-block" nav-bar="cached">
<ion-header-bar class="bar-stable bar bar-header disable-user-behavior" align-title="center">
<div class="buttons buttons-left" style="opacity: 0;">
<span class="left-buttons">
<button class="button button-icon icon ion-navicon-round HamBurgerMenu" menu-toggle="left"></button>
</span>
</div><div class="title title-center header-item" style="opacity: 0;">Jobs</div>
</ion-header-bar>
</div>
</ion-nav-bar>
<ion-tabs class="tabs-striped tabs-bottom tabs-color-tele">
<div class="tab-nav tabs">
<ion-tab icon-off="nav-icon jobs" icon-on="nav-icon active jobs" ui-sref="app.joblist" href="#/joblist"></ion-tab>
<ion-tab icon-off="nav-icon profile" icon-on="nav-icon active profile" ui-sref="app.profile" href="#/profile"></ion-tab>
<a ng-class="{'tab-item-active': isTabActive(), 'has-badge':badge, 'tab-hidden':isHidden()}" class="tab-item" icon-on="nav-icon active jobs" icon-off="nav-icon jobs"><!-- ngIf: badge --><!-- ngIf: getIconOn() && isTabActive() --><!-- ngIf: getIconOff() && !isTabActive() --><i class="icon nav-icon jobs" ng-if="getIconOff() && !isTabActive()"></i><!-- end ngIf: getIconOff() && !isTabActive() --><span class="tab-title ng-binding" ng-bind-html="title">Jobs</span></a><a ng-class="{'tab-item-active': isTabActive(), 'has-badge':badge, 'tab-hidden':isHidden()}" class="tab-item tab-item-active" icon-on="nav-icon active profile" icon-off="nav-icon profile"><!-- ngIf: badge --><!-- ngIf: getIconOn() && isTabActive() --><i class="icon nav-icon active profile" ng-if="getIconOn() && isTabActive()"></i><!-- end ngIf: getIconOn() && isTabActive() --><!-- ngIf: getIconOff() && !isTabActive() --><span class="tab-title ng-binding" ng-bind-html="title">Profile</span></a>
</div><ion-nav-view name="profile-tab" animation="slide-left-right" class="view-container tab-content" nav-view="active" nav-view-transition="android" nav-view-direction="swap">
<ion-view class="pane" nav-view="cached" style="-webkit-transition: 0ms; transition: 0ms; -webkit-transform: translate3d(0%, 0px, 0px);">
<ion-content class="content tele-content scroll-content ionic-scroll has-header has-tabs">
<div class="scroll" style="-webkit-transform: translate3d(0px, 0px, 0px) scale(1);">
<div class="scroll" style="-webkit-transform: translate3d(0px, 0px, 0px) scale(1);">
<ion-list class="disable-user-behavior">
<div class="list">
<div class="list">
<ion-item ng-click="controller.signOut()" class="item">
Sign Out
</ion-item>
</div>
</div>
</ion-list>
</div><div class="scroll-bar scroll-bar-v"><div class="scroll-bar-indicator scroll-bar-fade-out" style="-webkit-transform: translate3d(0px, 0px, 0px) scaleY(1); height: 0px;"></div></div>
</div><div class="scroll-bar scroll-bar-v"><div class="scroll-bar-indicator scroll-bar-fade-out" style="-webkit-transform: translate3d(0px, 0px, 0px) scaleY(1); height: 0px;"></div></div>
</ion-content>
</ion-view><ion-view class="pane" nav-view="active" style="-webkit-transition: 0ms; transition: 0ms; -webkit-transform: translate3d(0%, 0px, 0px);">
<ion-content class="content tele-content scroll-content ionic-scroll">
<div class="scroll" style="-webkit-transform: translate3d(0px, 0px, 0px) scale(1);">
<ion-list class="disable-user-behavior">
<div class="list">
<ion-item ng-click="controller.signOut()" class="item">
Sign Out
</ion-item>
</div>
</ion-list>
</div><div class="scroll-bar scroll-bar-v"><div class="scroll-bar-indicator scroll-bar-fade-out" style="-webkit-transform: translate3d(0px, 0px, 0px) scaleY(1); height: 0px;"></div></div>
</ion-content>
</ion-view>
</ion-nav-view>
</ion-tabs>
</ion-pane>
<ion-side-menu side="left" is-enabled="true" width="275" class="menu menu-left" style="width: 275px;">
<ion-header-bar class="bar bar-header disable-user-behavior">
<button class="button button-clear">
<img class="icon-left" src="img/teletracking-logo.png">
</button>
<h1 class="title" style="left: 114px; right: 114px;"> </h1>
<button class="button icon-left button-clear button-light fa fa-angle-left" menu-close=""> Hide</button>
</ion-header-bar>
<ion-content class="scroll-content ionic-scroll has-header">
<div class="scroll" style="-webkit-transform: translate3d(0px, 0px, 0px) scale(1);">
<ion-list class="disable-user-behavior">
<div class="list">
<ion-item nav-clear="" menu-close="" ui-sref="appWihoutTabs.configuration" class="actions-text item item-complex" href="#/configuration">
<a class="item-content" ng-href="#/configuration" target="_self" href="#/configuration">
Web Address Configuration
</a>
</ion-item>
</div>
</ion-list>
</div><div class="scroll-bar scroll-bar-v"><div class="scroll-bar-indicator scroll-bar-fade-out" style="-webkit-transform: translate3d(0px, 0px, 0px) scaleY(1); height: 0px;"></div></div>
</ion-content>
</ion-side-menu>
</ion-side-menus><ion-side-menus class="pane view" nav-view="active" style="-webkit-transition: 0ms; transition: 0ms; -webkit-transform: translate3d(0%, 0px, 0px);">
<ion-pane ion-side-menu-content="" class="menu-content pane">
<ion-nav-bar class="bar-stable nav-bar-container" nav-bar-transition="android" nav-bar-direction="none">
<div class="nav-bar-block" nav-bar="active"><ion-header-bar class="bar-stable bar bar-header disable-user-behavior" align-title="center"><div class="title title-center header-item" style="">Profile</div></ion-header-bar></div><div class="nav-bar-block" nav-bar="cached">
<ion-header-bar class="bar-stable bar bar-header disable-user-behavior" align-title="center">
<div class="buttons buttons-left" style="opacity: 0;">
<span class="left-buttons">
<button class="button button-icon icon ion-navicon-round HamBurgerMenu" menu-toggle="left"></button>
</span>
</div><div class="title title-center header-item" style="left: 59px; right: 59px; opacity: 0;">Jobs</div>
</ion-header-bar>
</div>
</ion-nav-bar>
<ion-tabs class="tabs-striped tabs-bottom tabs-color-tele">
<div class="tab-nav tabs">
<ion-tab icon-off="nav-icon jobs" icon-on="nav-icon active jobs" ui-sref="app.joblist" href="#/joblist"></ion-tab>
<ion-tab icon-off="nav-icon profile" icon-on="nav-icon active profile" ui-sref="app.profile" href="#/profile"></ion-tab>
<a ng-class="{'tab-item-active': isTabActive(), 'has-badge':badge, 'tab-hidden':isHidden()}" class="tab-item" icon-on="nav-icon active jobs" icon-off="nav-icon jobs"><!-- ngIf: badge --><!-- ngIf: getIconOn() && isTabActive() --><!-- ngIf: getIconOff() && !isTabActive() --><i class="icon nav-icon jobs" ng-if="getIconOff() && !isTabActive()"></i><!-- end ngIf: getIconOff() && !isTabActive() --><span class="tab-title ng-binding" ng-bind-html="title">Jobs</span></a><a ng-class="{'tab-item-active': isTabActive(), 'has-badge':badge, 'tab-hidden':isHidden()}" class="tab-item tab-item-active" icon-on="nav-icon active profile" icon-off="nav-icon profile"><!-- ngIf: badge --><!-- ngIf: getIconOn() && isTabActive() --><i class="icon nav-icon active profile" ng-if="getIconOn() && isTabActive()"></i><!-- end ngIf: getIconOn() && isTabActive() --><!-- ngIf: getIconOff() && !isTabActive() --><span class="tab-title ng-binding" ng-bind-html="title">Profile</span></a>
</div><ion-nav-view name="profile-tab" animation="slide-left-right" class="view-container tab-content" nav-view="active" nav-view-transition="android" nav-view-direction="none">
<ion-view class="pane" nav-view="cached" style="-webkit-transition: 0ms; transition: 0ms; -webkit-transform: translate3d(0%, 0px, 0px);">
<ion-content class="content tele-content scroll-content ionic-scroll has-header has-tabs">
<div class="scroll">
<div class="scroll" style="-webkit-transform: translate3d(0px, 0px, 0px) scale(1);">
<div class="scroll" style="-webkit-transform: translate3d(0px, 0px, 0px) scale(1);">
<ion-list class="disable-user-behavior">
<div class="list">
<div class="list">
<div class="list">
<ion-item ng-click="controller.signOut()" class="item">
Sign Out
</ion-item>
</div>
</div>
</div>
</ion-list>
</div><div class="scroll-bar scroll-bar-v"><div class="scroll-bar-indicator scroll-bar-fade-out" style="-webkit-transform: translate3d(0px, 0px, 0px) scaleY(1); height: 0px;"></div></div>
</div><div class="scroll-bar scroll-bar-v"><div class="scroll-bar-indicator scroll-bar-fade-out" style="-webkit-transform: translate3d(0px, 0px, 0px) scaleY(1); height: 0px;"></div></div>
</div><div class="scroll-bar scroll-bar-v"><div class="scroll-bar-indicator scroll-bar-fade-out"></div></div>
</ion-content>
</ion-view>
</ion-nav-view>
</ion-tabs>
</ion-pane>
<ion-side-menu side="left" is-enabled="true" width="275" class="menu menu-left" style="width: 275px;">
<ion-header-bar class="bar bar-header disable-user-behavior">
<button class="button button-clear">
<img class="icon-left" src="img/teletracking-logo.png">
</button>
<h1 class="title" style="left: 114px; right: 114px;"> </h1>
<button class="button icon-left button-clear button-light fa fa-angle-left" menu-close=""> Hide</button>
</ion-header-bar>
<ion-content class="scroll-content ionic-scroll has-header">
<div class="scroll" style="-webkit-transform: translate3d(0px, 0px, 0px) scale(1);">
<ion-list class="disable-user-behavior">
<div class="list">
<ion-item nav-clear="" menu-close="" ui-sref="appWihoutTabs.configuration" class="actions-text item item-complex" href="#/configuration">
<a class="item-content" ng-href="#/configuration" target="_self" href="#/configuration">
Web Address Configuration
</a>
</ion-item>
</div>
</ion-list>
</div><div class="scroll-bar scroll-bar-v"><div class="scroll-bar-indicator scroll-bar-fade-out" style="-webkit-transform: translate3d(0px, 0px, 0px) scaleY(1); height: 0px;"></div></div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</ion-nav-view>
<div class="backdrop"></div><div class="click-block click-block-hide"></div>
</body>