I'm using the standard modal popup from twitter bootstrap ui team without the fade property: http://getbootstrap.com/javascript/#modals
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="cancel()">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item=item">{{item}}</a>
</li>
</ul>
<div>Selected Item: {{selected.item}}</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="cancel()">Close</button>
<button type="button" class="btn btn-primary" ng-click="ok()">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- modal -->
In chrome and safari (with user-agent = ipad) it loads instantly.
On the iPad it takes more than 2.5 seconds to load. Can anyone point me to how I would start looking into this? I commented out all the css fade elements. Not sure where next to look.
Thanks
Edit: it actually works super fast on a blank page. On a page with about 50 ng-repeat elements it's super slow. My guess is that the ng-repeat elements are being redrawn when this loads? I'll investigate this.
Fixed: The problem was a dropdown in each row which caused it to render slowly. Thanks