在Safari上通过同位素和无限滚动重叠图像

Question

我花了大量的精力去调试当同位素网格附加无限滚动时重叠的同位素网格问题。奇怪的是，这种情况仅在某些情况下才会发生，通常是在页面下方以及Safari中。

最初，这是Safari不喜欢img srcset的问题，因此我删除了它，并且它有时会重叠。

这已经使我筋疲力尽，所以我希望外面是否有人能够最终解决此问题。我在下面附上了我的代码片段。任何帮助将不胜感激

这里是staging/test page

的链接

在Safari上重现的步骤：

1. 选择过去
2. 从下拉菜单中选择所有艺术家

3. 向下滚动，您会发现重叠的问题

   let constructInfiniteScroll = ($grid, itemSelector) => {
       $grid.imagesLoaded().done(() => {
       $grid.isotope({
       "itemSelector": itemSelector,
       "transitionDuration": 0,
   })
   .on('layoutComplete', (e) => {
      // Initialize new waypoints
      Waypoints.init()
   })
   
   $grid.infiniteScroll({
     "append": itemSelector,
     "outlayer": $grid.data('isotope'),
     "path": '.infinity-next-page',
     "history": false,
     "status": ".page-load-status",
     "debug": true,
   })
   .on( 'append.infiniteScroll', function( event, response, path, 
   items ) {
     $grid.isotope('layout')
     console.log('++ layout');
   })
   
     Waypoints.init()
   
    })
   }