CSS infinite loop animation not working in Safari11 or iOS11

Question

I am using an infinite CSS animation to create a marquee slider.

I've used javascript to write the keyframes dynamically as the screen size changes as the amount the slider needs to move by will change with screen size.

It works perfectly on Chrome & Firefox but in Safari it will only loop once and then it stops.

I've looked around for a solution but am already doing what people suggest (making sure there's a 100% keyframe, using WebKit prefixes).

Maybe there's a better way to do this so a solution or completely different approach that works would be appreciated.

Now just to warn you, I'm not an expert in javascript and those of you who are more experienced make wince at my code but Constructive criticism is welcomed.

Thanks in advance!

Here's the code:

    jQuery(document).ready(function($) {
        // Returns the current viewport width
        var viewport = updateViewportDimensions();

        // Get the gallery container
        var gallery_container = document.querySelector('.gallery .slider_container');

        // Query the galler slider containers
        var gallery = document.querySelector('.gallery .slider_container a');

        // Get the width of the image containers and console log it
        var gallery_width = gallery.offsetWidth;
        console.log('gallery image width = ' + gallery_width);

        var gallery_four = gallery_width * 4;

        // Count the number of image containers 
        var no_gallery = document.querySelectorAll('.gallery .slider_container a').length;

        // Set the width of the gallery container to be the width of each image container by the number of containers plus a bit
        var gallery_container_width = (gallery_width * no_gallery) + 20;
        gallery_container.style.width = gallery_container_width + 'px';

        console.log("Conatiner width: " + gallery_container_width);

        // Set the distance for the keyframe to move the slider container, the first 4 slides are duplicated at the end the make the loop smoother
        distance_to_move = gallery_container_width - gallery_four;
        console.log('Distance to move: ' + distance_to_move);

        // Create a style tag on the page to hold the update keyframes
        var sheet = document.createElement('style')
        sheet.innerHTML = "@keyframes moveSlideshow {0% { -webkit-transform: translateX(0);-moz-transform: translateX(0);transform: translateX(0); } 100% { -webkit-transform: translateX(-";
        sheet.innerHTML += distance_to_move;
        sheet.innerHTML += "px); -moz-transform: translateX(-";
        sheet.innerHTML += distance_to_move;
        sheet.innerHTML += "px); transform: translateX(-";
        sheet.innerHTML += distance_to_move;
        sheet.innerHTML += "px); }}";
        sheet.innerHTML += "@-webkit-keyframes moveSlideshow {0% { -webkit-transform: translateX(0);-moz-transform: translateX(0);transform: translateX(0); } 100% { -webkit-transform: translateX(-";
        sheet.innerHTML += distance_to_move;
        sheet.innerHTML += "px); -moz-transform: translateX(-";
        sheet.innerHTML += distance_to_move;
        sheet.innerHTML += "px); transform: translateX(-";
        sheet.innerHTML += distance_to_move;
        sheet.innerHTML += "px); }}";

        document.body.appendChild(sheet);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="marquee_slider gallery">
    <div class="slider_container">
        <!-- for brevity I will inlcude just 1 slide and its hidden lightbox here, there are actually about 20 of these -->
        <a href="#gallery-image-1" class="lightbox ">
            <div class="image_container" style="background-image: url(/wp-content/uploads/2018/08/sofacushions_process.jpg);">
            </div>
            <div class="text_container">
                <p class="caption">New sofa cushions</p>
            </div>
            <i class="fa fa-info-circle"></i>
        </a>
        <div class="lightboxes" style="display: none">
            <div id="gallery-image-1" class="gallery_lightbox">

                <img src="/wp-content/uploads/2018/08/sofacushions_process.jpg" alt="Sofa Cushion Repair Process">
                <p class="service">Sofa Cushion Repair</p>
                <div class="caption">
                    <p>New sofa cushions</p>
                    <p>An old worn out sofa needed a bit of TLC. View the next few images to see our process.</p>
                </div>
            </div>
        </div>
    </div>
</div>

I have also included this jQuery in a function which will run if the viewport is changed

Answer 1

Download the files from link then import the css and js ticker files in your code from dist/js and dist/css folders.I tried it and works.

$(document).ready(function(){

            $(".default-ticker").ticker({

            // item selector
            item: 'div',

            // Toggles whether the ticker should pause on mouse hover
            pauseOnHover: false,

            // <a href="https://www.jqueryscript.net/animation/">Animation</a> speed
            speed: 60,

            // Decides whether the ticker breaks when it hits a new item or if the track has reset
            pauseAt: '',

            // delay in milliseconds
            delay: 500

            });
    });

HTML

<div class="container">
    <div class="row">
            <div class="default-ticker">
               <div id="img1">
                 <img src="https://www.wefixanysofa.com/wp-content/uploads/2018/08/sofacushions_process.jpg" alt="Sofa Cushion Repair Process">
                 <p class="service">Sofa Cushion Repair</p>
                 <div class="caption">
                  <p>New sofa cushions</p>
                  <p>An old worn out sofa needed a bit of TLC. View the next few images to see our process.</p>
                 </div>
               </div>

               <div id="img2">
                 <img src="https://www.wefixanysofa.com/wp-content/uploads/2018/08/sofacushions_process.jpg" alt="Sofa Cushion Repair Process">
                 <p class="service">Sofa Cushion Repair</p>
                 <div class="caption">
                   <p>New sofa cushions</p>
                   <p>An old worn out sofa needed a bit of TLC. View the next few images to see our process.</p>
                 </div>
               </div>                

            </div>
    </div>
</div>

Hope it helps!!!