Scrollable div - laggy animation

@AceBoy wrote:

Hello,
I have done a div (black stroke) which has some height. It’s a container for another div (a container for elements of the table) (red stroke). Elements of table have green stroke and also they are components (idk if it’s important, but better more info than nothing). My problem is that if container for elements has bigger size than real size of container for that scroll than all animations in components become laggy. If size is the same or less then there is no lag.

      <ion-col no-padding col-10>
        <ion-scroll scrollY="true" style="height:100%">
          <div #resourcesgrid no-padding id="resources-grid{{cat.id}}" class="resources-grid" [ngStyle]="{'height': (gridHeight) + 'px'}">
            <table style="width:100%;empty-cells:show;table-layout:fixed;">
              <tr style="visibility:visible">
                <td *ngFor="let number of [0,1,2,3,4]" class="cellhidden"></td>
              </tr>
              <tr *ngFor="let row of resGrid">
                <ng-container *ngFor="let cellEl of row" >
			           .
			           . (some components with animations in it)
			           .
                </ng-container>
              </tr>
            </table>
          </div>
        </ion-scroll>
      </ion-col>

What should I do? What am I doing wrong?

Posts: 1

Participants: 1

Read full topic