javascript - CSS 无限循环动画在 iOS 11 的 Safari 11 中不起作用

Question

我正在使用无限 CSS 动画来创建选取框 slider 。

我使用 javascript 在屏幕尺寸变化时动态编写关键帧，因为 slider 需要移动的量将随屏幕尺寸而变化。

它在 Chrome 和 Firefox 上完美运行，但在 Safari 中它只会循环一次然后停止。

我四处寻找解决方案，但我已经在按照人们的建议去做(确保有 100% 的关键帧，使用 WebKit 前缀)。

也许有更好的方法来执行此操作，因此我们将不胜感激解决方案或完全不同的可行方法。

现在只是警告你，我不是 javascript 方面的专家，那些更有经验的人会对我的代码畏缩，但欢迎提出建设性的批评。

提前致谢!

代码如下:

    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>

我还将这个 jQuery 包含在一个函数中，该函数将在视口(viewport)更改时运行

Answer 1

从link下载文件然后从 dist/js 和 dist/css 文件夹中导入代码中的 css 和 js 代码文件。我试过了并且有效。

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

希望对您有所帮助!!!