Html table scroll very slow


#1

Hello,

we’ve an html table in a page created using a ngFor. The scroll of this table it’s very slow in ipad mini 2/4 (no problems with android and iphone 6/7/7 plus) also with only 50 rows. Also the selection of the rows is very slow (we’ve a checkbox for each row, with or without click event).

We’re using the ionic wkwebview.

We’ve removed all unecessary code in order to exclude some our slow business logic and we’re trying with just one column.

Page HTML

<div style="overflow:scroll; -webkit-overflow-scrolling:touch">
  <table cellpadding="2" cellspacing="2" *ngIf="isDataLoaded">

    <thead>
      <tr>
        <th>{{ 'general.sel' | translate }}</th>
        <th style="text-align:left" *ngFor="let column of visibleColumns">{{column.description}}</th>
      </tr>
    </thead>


    <tbody [style.height]="tableHeight">

      <tr  *ngFor="let row of gridData.data;  let rowIndex = index">

        <td tappable (click)="selectRow(row, rowIndex)">
          <input  type="checkbox" [checked]="row.selected">
        </td>

        <td style="text-align:left" *ngFor="let column of visibleColumns">
          <span [class.required]="row[column.code].required">{{row[column.code].valueLabel}}</span>
        </td>

      </tr>

    </tbody>

  </table>
</div>

ionic info output

cli packages:

    @ionic/cli-utils  : 1.18.0
    ionic (Ionic CLI) : 3.18.0

global packages:

    cordova (Cordova CLI) : 7.0.0

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.7.1

System:

    ios-deploy : 1.9.1
    ios-sim    : 5.0.4
    Node       : v6.11.3
    npm        : 3.10.10
    OS         : macOS High Sierra
    Xcode      : Xcode 9.1 Build version 9B55

What could be the problem? Is there a workaround to solve it?

Thanks for your attention.


#2

This might be related to this issue on github.


#3

Thanks for your reply.
We’ve already tried it, but it doesn’t work…


#4

I recommend you not to use html tables. Ionic have powerful flexbox system for building custom layouts.


#5

THE object property lookup in span-required may be a performance killer. At least my experience in in ion-list>100 items

Try without the span and see if it helps

(span [class.required])


#6

Our app is quite large (in code and features) and we have tested several approaches.
At the moment we have some views with simple ion-items inside ion-list and we noticed the same behaviour (the scrolling and selection functionalities are very slow on Ipad mini 2/4 but they are not on other iOS and Android devices).

We’ve tested also with ion-grid (instead html table), but the situation remains the one described above and in this view we have the constraint of vertical and horizontal scroll…

Any suggestion?


#7

Maybe using ion-list with virtualScroll or infiniteScroll. Have you tried it?


#8

Thanks for your reply.
In the code attached to the first post we don’t have removed the span element, but in our attempts we’ve just left a “< p >” tag with simple text, also without binding: no improvements in anyway…


#9

We’ve also used the ion-list with virtual/infinite scroll, but no improvements also in this way…


#10

Hey there!

May the problem have something to do with the device hardware capacities?
Have you tried to load just 5 rows at a time, and load another 5 rows once you reach the bottom of your page or something like that?


#11

Thanks for your reply.
It may be device hardware capacities problem, but a simple list with 50 items should not cause this problem (ipad mini 2/4 has 1 GB ram). Moreover, we’ve already used the infinite scroll and the result is the same.


#12

Removing this (as indicated in your link)

:focus,
:active {
outline: none;
}

from main.css solve the problem. There was a problem in our script and the code was not removed during the build, Now it works well!