WebGL canvases - unfilter causes canvas visbility issue

[jrvanstone]

I have a slider that contains WebGL canvases for event artworks, these all work on initial init but when I filter and then unfilter the slider it causes this odd behaviour where the canvases in the cloned section are invisible (but still in the DOM).

If I then scroll, only the WebGL canvases in the cloned slides show and the original set of slides go blank.

Slick Code:

// Events Carousel
$(document).ready(function() {
    if ($('.events-list').length === 0) return;

    let slickInitialized = false;

    function initializeSlick() {
        if (slickInitialized) return;

        $('.events-list').slick({
            dots: false,
            speed: 800,
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 1,
            arrows: false,
            touchThreshold: 1000,
            variableWidth: true,
            adaptiveHeight: false,
            responsive: [
                {
                    breakpoint: 991,
                    settings: {
                        slidesToShow: 2
                    }
                },
                {
                    breakpoint: 479,
                    settings: {
                        slidesToShow: 1
                    }
                }
            ]
        }).on('init', function(event, slick) {
            $(document).trigger('slickInitialized');
        });

        slickInitialized = true;
    }

    initializeSlick();

    $('.slider-prev').click(function(){
        $(this).closest('.section').find(".events-list").slick('slickPrev');
    });

    $('.slider-next').click(function(){
        $(this).closest('.section').find(".events-list").slick('slickNext');
    });

    function updateResultsCounter() {
        var visibleSlides = $('.events-list .slick-slide:not(.slick-cloned)').filter(function() {
            return $(this).attr('aria-hidden') === 'false';
        }).length;
        $('.results-text.count').text(visibleSlides);
    }

    function applyFilter() {
        var selectedCountries = [];
        $('.browse-filter-checkbox-field input:checked').each(function() {
            selectedCountries.push($(this).siblings('.browse-filter-checkbox-label').text());
        });
        var searchTerm = $('#eventSearch').val().toLowerCase();

        $('.events-list').slick('slickUnfilter');

        $('.events-list').slick('slickFilter', function() {
            var $slide = $(this);
            var country = $slide.find('.slick-filter-country').text();
            var matchesCountry = selectedCountries.length === 0 || selectedCountries.includes(country);

            var matchesSearch = true;
            if (searchTerm) {
                var title = $slide.find('.event-title').text().toLowerCase();
                var date = $slide.find('.event-date').text().toLowerCase();
                var details = $slide.find('.events-details-inner').text().toLowerCase();
                matchesSearch = title.indexOf(searchTerm) > -1 || 
                                date.indexOf(searchTerm) > -1 || 
                                details.indexOf(searchTerm) > -1;
            }

            return matchesCountry && matchesSearch;
        });

        var visibleSlides = $('.events-list .slick-slide:not(.slick-cloned)').filter(function() {
            return $(this).attr('aria-hidden') === 'false';
        });

        if (visibleSlides.length === 0) {
            $('.events-list').hide();
            $('#emptyState').show();
            $('#eventSearch').css('border', '#c13243 1px solid');
        } else {
            $('.events-list').show();
            $('#emptyState').hide();
            $('#eventSearch').css('border', '');
        }

        updateResultsCounter();
        $('.events-list').slick('setPosition');
    }

    $('.browse-filter-checkbox-field input[type="checkbox"], #eventSearch').on('change input', function() {
        applyFilter();
    });

    applyFilter();
    updateResultsCounter();

    const checkboxes = document.querySelectorAll('.browse-filter-checkbox-field');
    const countryFilters = document.querySelectorAll('.slick-filter-country');
    const availableCountries = new Set();

    countryFilters.forEach(filter => {
        availableCountries.add(filter.textContent.trim());
    });

    checkboxes.forEach(checkbox => {
        const label = checkbox.querySelector('.browse-filter-checkbox-label');
        if (label) {
            const country = label.textContent.trim();
            if (!availableCountries.has(country)) {
                checkbox.remove();
            }
        }
    });

    $('#eventSearch').on('input', function() {
        applyFilter();
    });

    $('.events-list').on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){
        updateResultsCounter();
    });

    $('#eventSearch').on('search', function() {
        if (this.value === '') {
            applyFilter();
        }
    });
});
  
window.slickInitialized = true;

This is quite the nightmare conflict/bug, any direction on how slick handles filtering and unfiltering would be appreciated - any idea why this would be happening?