Overlapping items sometimes on Safari with Infinite Scroll

[josefarrugia]

Hey all!

I have spent a considerable amount of trying to debug the issue of items in an isotope grid overlapping when they get appended with Infinite Scroll. Strangely this only happens sometimes, usually further down the page and with Safari.

Initially it was an issue with Safari not liking img srcset, so I removed that and it only overlaps from time to time.

It's become mentally exhausting so I was hoping if anyone out there has managed to finally resolve this issue. I have attached a snippet of my code below. Any help would be most appreciated 🙏🏼

Here's a link to the test/staging site

Steps to reproduce on Safari:

1. Select Past
2. Select All Artists from the dropdown menu
3. Scroll Down and you'll notice the overlapping issue

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()

    })
 }

[desandro]

Thanks for reporting this issue. I'm having trouble reproducing the issue. When I select All Artists the same two items appear. No more items appear on scroll.

This is why its important to try and produce reduced test case and not a production site.

That said, Safari has had several issues with Infinite Scroll and imagesLoaded, see metafizzy/infinite-scroll#671. There's is also the lack of srcset support in imagesLoaded desandro/imagesloaded#175. There is also my overarching opinion that using Isotope with Infinite Scroll is a bad user experience, see #1358

[josefarrugia]

Thanks for replying @desandro!

The steps are as follows:

1. Select Past
2. Select All Artists from the dropdown menu
3. Scroll down and you would notice some overlapping later down the page. Interestingly enough it takes up a lot of memory and CPU resources.

What do you recommend in using instead? Masonry? Packery?

[desandro]

Thanks for that. I viewed a couple times in Safari and I was not able to reproduce the overlapping. It's likely caused by a lingering imagesLoaded bug. As for memory issues, maybe Infinite Scroll and Masonry/Isotope is not a good solution for this site.

[krnlde]

Late answer but I'm relatively sure it has something to do with the transitioncancel event.

It states:

If the transitioncancel event is fired, the transitionend event will not fire.
(source)

So probably the solution would be to also listen to transitioncancel for a proper cleanup.

Since we have the same issue, and also only randomely and only in these two browsers, and we also use a lazyloading library - which could theoretically somehow trigger a transitioncancel internally when swapping images - I'd guess this might be it.

Sidenote: I could only reproduce this bug with Safari.