Search code examples
javascriptsafariswiper.js

My SWIPER JS simply won't load/work in Safari?

A website I am writing worked in Chrome, Firefox, Android etc. but failed when I tested on an iPad (Safari), so I narrowed down to the following code to test. Swiper JS is the culprit, at least for me. I added the external JS to see if Safari wasn't loading the linked files, like a CORS issue I researched, but it is. The external function green() simply changes the background color.

On all my browsers, the swiper works and the background ends up green; on Safari, changes to red (so clearly JS works) and the swiper does not initialize!

Tested on localhost, 10.0.0.26, and even copied over to a domain on Bluehost. Same thing all cases. I already grabbed the latest copy of SwiperJS since I was several behind; does not make a difference.

<html>

<head>
    <link rel="stylesheet" href="swiper.css">
    <script type="application/javascript" src="swiper.js"></script>
    <script type="application/javascript" src="test.js"></script>
    <style>
        .x {
            height: 200px;
            width: 200px;
            background-color: blue;
        }

        .test {
            width: 80%;
        }

    </style>
    <script>
        window.onload = init;

        function init() {

            document.body.style.backgroundColor = 'red';

            var aSwiper = new Swiper('.test', {
                centeredSlides: true,
                effect: 'coverflow',
                slidesPerView: 'auto',
                coverflowEffect: {
                    rotate: 0,
                    slideShadows: false,
                    depth: 200,
                    stretch: 0
                },
                spaceBetween: 25
            });


            green();

        }

    </script>
</head>

<body>
    <div class="swiper test">
        <div class="swiper-wrapper ">
            <div class='swiper-slide x'></div>
            <div class='swiper-slide x'></div>
            <div class='swiper-slide x'></div>
            <div class='swiper-slide x'></div>
            <div class='swiper-slide x'></div>
            <div class='swiper-slide x'></div>
            <div class='swiper-slide x'></div>
            <div class='swiper-slide x'></div>
        </div>
    </div>
</body>

</html>

addition: Using something called 'Inspect' was able to start debugging the iPad on my Windows machine, yay, and console comes up with "SyntaxError: Unexpected token '...'. Expected a property name." on line 2456 of swiper.js Unfortunately this is beyond my current capabilities to reverse-engineer but may help you guys...

Solution

  • As per Jaromanda X and my own further debugginging, seems that their code uses (at least) the spread operator, unsupported in older versions of Safari. Period. Bummer. Thanks for all your help!