并非总是在野生动物园中显示ReactJS图像

Question

我正在Create-React-App中显示一系列图像，并且在Chrome中一切正常。但是在移动Safari中，有时会丢失一些图像。

以下是iPhone XS上野生动物园的屏幕截图：

以下是此“轮播”的代码：

.item {
      width: calc(100vw / 3 - 20px);
      }
.hs {
    display: grid;
    grid-gap: 10px;
    grid-auto-flow: column;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    padding-bottom: calc(.75 * var(--gutter));
    justify-content: space-between;
    }

.hs:before,
.hs:after {
  content: '';
  width: 6px;
  }

productPhotos = () =>
  this.props.activeproduct.sliderPhotos.map((photo, i) => 
      <img
      onClick={() => this.jumpToPage(i)}
      alt="Product_Photo"
      src={photo}
        key={i}
        className="item"
        style={{ scrollSnapAlign: 'center' }}
      />
    );

              <div className="hs">
                {this.productPhotos()}
              </div>

当我刷新页面时，有时会显示所有图像，有时会丢失单个图像。这是完全不可预测的。

关于如何解决此问题的任何想法？