Bootstrap twitter modal is slow to load on iPad

Viewed 3243

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()">&times;</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

0 Answers
Related