Card list doesn't know it's width when displayed

ionic-v1
1

When I load a page with a card list on in it, it initially shows up very skinny and then snaps to the full width of the page. Cards without lists don’t do this. Also if I remove the animation it works fine. Anyone seen this happen or know what I’ve done wrong?

2

Hard to tell without seeing your code. Mind posting it?

3

Here’s what I’ve got. Let me know if you see anything wrong. I didn’t include the css because if I remove all the css the problem persists so I don’t think that is the cause.

index html:

<body ng-app="starter">
    <ion-side-menus>
    	<ion-side-menu-content>
          <ion-header-bar class="bar bar-header woodHeader">
                <button class="button icon ion-navicon button-clear custom-icon" menu-toggle></button>
                <h1 class="title">Sleep Easy</h1>
            </ion-header-bar>
            <ion-header-bar class="bar bar-subheader">
            	<div class="button-bar">
                	<a ui-sref="dreamLog" class="button">Dream Log</a>
                    <a ui-sref="therapy" class="button">Therapy</a>
                </div>
            </ion-header-bar>
            <ion-content class="mainContent">
            	<ion-nav-view>
                	
                </ion-nav-view>            
            </ion-content>
            <div class="bar bar-footer woodFooter"></div>
        </ion-side-menu-content>
        <ion-side-menu side="left">
        	<ion-header-bar class="bar-dark">
            	<h1 class="title">Settings</h1> 
            </ion-header-bar>
            <ion-content>
                <ion-list class="settingsMenu">
                    <a class="item item-icon-right sideMenuButton" menu-close ui-sref="learn">Learn<i class="icon ion-monitor"></i></a>
                    <a class="item item-icon-right sideMenuButton" menu-close ui-sref="about">About<i class="icon ion-information-circled"></i></a>
                    <a class="item item-icon-right sideMenuButton" menu-close ui-sref="tools">Tools<i class="icon ion-settings"></i></a>
                    <a class="item item-icon-right sideMenuButton" menu-close ui-sref="settings">Settings<i class="icon ion-gear-b"></i></a>
                </ion-list>
            </ion-content>
            
        </ion-side-menu>
    </ion-side-menus>
  </body>

loaded content:

<div class="list card">
<div class="item item-divider">
Settings
</div>
<a href="#" class="item item-icon-right">
<i class="icon ion-arrow-right-b"></i>
Help Overlay
</a>
<a href="#" class="item item-icon-right">
<i class="icon ion-arrow-right-b"></i>
Reminders
</a>
<a href="#" class="item item-icon-right">
<i class="icon ion-arrow-right-b"></i>
Feedback
</a>
<a href="#" class="item item-icon-right">
<i class="icon ion-arrow-right-b"></i>
Security
</a>
<a href="#" class="item item-icon-right">
<i class="icon ion-arrow-right-b"></i>
Breathing
</a>
</div>

JS:

angular.module('starter', ['ionic'])

.config(function($stateProvider, $urlRouterProvider){
   $stateProvider.state('app',{
      url:"/app",
      templateUrl:"index.html"
   });
   $stateProvider.state('about',{
      url:"/about",
      templateUrl:"templates/about.html"
   });
   $stateProvider.state('learn',{
      url:"/learn",
      templateUrl:"templates/learn.html"
   });
})