I have the following very simple html in my ionic app
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<ion-nav-view></ion-nav-view>
</ion-content>
</ion-pane>
The problem is that the ion-content
directive wraps the ion-nav-view
content with this html
<div class="scroll" style="-webkit-transform: translate3d(0px, 0px, 0px) scale(1);"></div>
It seems that if I remove the translate3d
attribute the content is displayed, but I have to assume there is a better way, or something that I'm missing.
The content displayed by my template is very simple
<div>
<p>Welcome to the main screen</p>
</div>
Here's a plunk of the problem I'm experiencing
I find when I update your index.html to following it loads the tabs.html.
<body ng-app="starter" animation="slide-left-right-ios7">
<ion-nav-view></ion-nav-view>
</body>
And I have moved nav bar to tabs.html to show nav bar on all pages.
<ion-nav-bar></ion-nav-bar>
<ion-tabs class="tabs-icon-top">
<!-- Pets Tab -->
<ion-tab title="Works" icon="icon ion-home" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
<!-- About Tab -->
<ion-tab title="Broken" icon="icon ion-gear-b" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
</ion-tabs>
I think what is happening is that ui-router loads abstract rout html first and then goes to default route because no route is specified.
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "tabs.html"
})
This is where you specified default route.
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');