VirtualScroll removes box-shadow

[rtalexk]

I have a list of items, each item has box-shadow.

To improve page performance I added virtualScroll.
I designed items with box-shadow property, and when I use virtualScroll, box-shadow disappear.

Items with box-shadow. Without virtualScroll.

Items without box-shadow. With virtualScroll.

virtualScroll is added as below:

<div class="review-padding" [virtualScroll]="reviews" approxItemHeigh="230px">
    <div *virtualItem="let review">
      <review 
          (onUser)="onUser($event)"
          (onReview)="onReview(review, $event)"
          [review]="review"></review>
    </div>
  </div>

I thinking is because div with class="virtual-position" uses transform: translate to position items, and each item has contain: content.

How can I fix this problem?

EDIT: I notice virtualScroll calculates exact height of items, div class="virtual-position" has that height and all content outside div class="virtual-position isn’t shown.

[rtalexk]

I just can’t solve the problem and I decided to change the approach of visualization.

I think looks nice and smooth performance.