Slick Slider renders image poorly in IOS

Question

My Slick JS code ids below.... but is there anything I can add to the script in Slick Slider to possibly solve this weird rendering problem?

It's a simple implementation of the Slick Slider, 6 images maximum with thumbnails below.

Sometimes the images render just fine in IOS, MacBook , iMac, iPad, but lots of times I get just the "line" or lines which is the height of the images. Sometimes multiple lines, more than 6 so no real match to the 6 images in the slider.

It's not really a CDN issue, no issues on a PC, and if I either wait a bit or click in the slide/thumbnails all load just fine and it's good to go.

Did the googling, and saw one or two references to some other kinda issues with IOS, but nothing jumped out. Happens in Safari, Chrome, Firefox on my Macbook. grrrr

Here is my Slick JS in case anyone can think of something to modify or add.

Thanks

   <script type="text/javascript">
    $(document).ready(function() {
        $('.slider').slick({
        arrows: true,
        variableWidth: true,
        centerMode: true,
        asNavFor: '.slider-nav',
        swipeToSlide: true,
        responsive: [
            // {
            //   breakpoint: 767,
            //   settings: {
            //     // variableWidth: false,
            //   },
            // },
            {
            breakpoint: 575,
            settings: {
                adaptiveHeight: true,
                arrows: false,
                variableWidth: false,
            },
            },
        ],
        });
    
        $('.slider-nav').slick({
        variableWidth: true,
        //slidesToShow: 6,
        centerMode: true,
        asNavFor: '.slider',
        infinite: false,
        dots: false,
        arrows: false,
        swipeToSlide: true,
        focusOnSelect: false,
        responsive: [{
            breakpoint: 575,
            settings: {
            infinite: false,
            dots: true,
            arrows: true,
            centerMode: false,
            },
        }, ],
        });
    });
    
    $('.slider-nav .slick-slide').on('click', function(event) {
        $('.slider').slick('slickGoTo', $(this).data('slickIndex'));
    });
    
    $('.js-full-screen-button-open').click(function() {
        $('.slider').slick("slickSetOption", 'speed', 0)
        var currentSlide = $('.slider').slick('slickCurrentSlide')
        $('.slider').slick('slickGoTo', currentSlide, false)
    
        $('.slider').addClass('full-screen-slider')
        $('.js-full-screen-button-close').addClass('active')
    
        $('.slider').slick("slickSetOption", 'speed', 300)
    })
    
    $('.js-full-screen-button-close').click(function() {
        $('.slider').slick("slickSetOption", 'speed', 0)
        var currentSlide = $('.slider').slick('slickCurrentSlide')
        $('.slider').slick('slickGoTo', currentSlide, false)
    
        $('.slider').removeClass('full-screen-slider')
        $('.js-full-screen-button-close').removeClass('active')
    
        $('.slider').slick("slickSetOption", 'speed', 300)
    })
    </script>

This is the worst case scenario where 6 images don't appear.

https://i.sstatic.net/KMnqY.png

I just realized I was placing a border around the large images in the Slider. Maybe that's what was causing this to occur at times. Still weird how mainly IOS/Safari, but I just removed that border from the CSS and will see what happens throughout the day...

Might've answered my own problem.