virtual scroll doesn't work on safari

[ranbuch]

This url's virtual scrolling works on Chrome but not on Safari.

This is how the component looks like:

<div class="flexcontainer">
  <virtual-scroller #scroll [items]="items" fxLayout="row" fxLayoutAlign="space-between start"
    class="flex-wrap" [parentScroll]="scroll.window">
    <app-offer-card *ngFor="let item of scroll.viewPortItems; trackBy: trackByFn" [item]="item" fxFlex="100%"
      fxFlex.gt-sm="305px"></app-offer-card>
  </virtual-scroller>
</div>

.flexcontainer {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}
html {
    height: 100%;
    display: block;
}

BTW I'm not using (vsEnd) event because it didn't work for me on Safari as well, probably for the same reason.

Any suggestions? Thanks.

[lincolnthree]

@ranbuch Have you tried wrapping your 'app-offer-card' in a div with the ngFor on the div? Like so:

<div class="flexcontainer">
  <virtual-scroller #scroll [items]="items" fxLayout="row" fxLayoutAlign="space-between start"
    class="flex-wrap" [parentScroll]="scroll.window">
    <div *ngFor="let item of scroll.viewPortItems; trackBy: trackByFn">
      <app-offer-card [item]="item" fxFlex="100%"
      fxFlex.gt-sm="305px"></app-offer-card>
    </div>
  </virtual-scroller>
</div>

[ranbuch]

@lincolnthree thank you for your response. Unfortunately this solution doesn't seems to work.

[hichamkazan]

You can try to set height to .flexcontainer, this fixed it on safari for me