js,html,css chromeで動くのにsafariでは動かない

透過して画像を変えてみたくて作ったのですが、chromeでは動くのですが、safariだと一番最後のはずの画像が表示されたまま、になりクリックにも反応しません。
どなたかアドバイス頂けると幸いです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <style>
            #slider{
                position: relative;
                width: 30em;
                height: 30em;
                background-color: antiquewhite;
                margin:  0 auto;
                width: 720px;
                overflow: hidden;
                }
            .slide img{width: 100%;}
            .slide{
                position: absolute;
                width: 100%;
                opacity: 0%;
         
                -webkit-transition: all 1s;
                -moz-transition: all 1s;
                -ms-transition: all 1s;
                -o-transition: all 1s;
                
                transition: all 2s;
                }
            .display{opacity: 100%;}
            .toolbar{
                margin:  0 auto;
                width: 720px;
                overflow: hidden;
                text-align: center;
                background-color: burlywood;
            }
            .nav{display: inline-block;}
            #prev{
                float: left;
                width: 40px;
                height: 40px;
                background: url(img/prev.svg) no-repeat;
                cursor: pointer;
            }
            #next{
                float: left;
                width: 40px;
                height: 40px;
                background: url(img/next.svg) no-repeat;
                cursor: pointer;
            }
            
        </style>
        <div id="slider">
            <div class="slide display"><img src="img/img1.jpg"></div> <!---先頭displayつけないと初回表示何もなくなる--->
            <div class="slide"><img src="img/img2.jpg"></div>
            <div class="slide"><img src="img/img3.jpg"></div>
            <div class="slide"><img src="img/img4.jpg"></div>
        </div>
        <div class="toolbar">
            <div class="nav">
                <div id="prev"></div>
                <div id="next"></div>
            </div>
        </div>
        <script>


            var current = 0;
            var slider = document.getElementById('slider').getElementsByTagName( 'div' );

  
            var changeImage = function(num) {
                for(var i = 0; i < slider.length; i++){
                slider[i].classList.remove('display');
            }
            
            if(current + num >= 0 && current + num < slider.length) {
                current += num; 
                tog_display();   
            }else if (current + num >= slider.length){
                current = 0; 
                tog_display(); 
            }else if (current + num < 0){
                current = slider.length -1 ; 
                tog_display(); 
            }

            
            function tog_display(){
                slider[current].classList.toggle('display');   
            };

            };
            
            document.getElementById('prev').onclick = function() {
            changeImage(-1);
            };
            document.getElementById('next').onclick = function() {
                changeImage(1);
            };
            
            console.log(current);
        


        </script>
    </body>
</html>

m.ts10806

2020/03/21 01:24

念のためOSも追記してください

mogumogu22

2020/03/21 01:46

情報不足ですみません。 macOS Catalina　10.15.3　でした。

m.ts10806

2020/03/21 01:48

あごめんなさい。「質問本文に」追記してください

m.ts10806

2020/03/21 01:49

ちなみにWindows Safariとかスマートフォンとかで試してみました？(環境がないなら構いません)

marlboro_tata

2020/03/21 02:13

検証してみましたが、JS自体は想定どおりに動いているものと思います。 CSSのoapcityの値ですが、サファリでは％の値をとれないみたいです。なので、これを実数値（100%は1に、0%は0に）してみると良いかと。 https://developer.mozilla.org/ja/docs/Web/CSS/opacity

mogumogu22

2020/03/21 02:23

すみません。そうですよね質問分の方がよかったですよね> < Windowsスマホはサーバーに上げてないとどのようにそちらでみて良いのかわからずみてませんでした。 100%は1に、0%は0に変更したらきちんと動きました！！助かりましたありがとうございました！

行動規範の内容に同意します

回答1件

自己解決

marlboro_tata さんのおっしゃるとおりoapcityを100%は1に、0%は0に変更したら、safariでも動きました。
ベストアンサーおしたかったのですが、回答に書いていただけないとベストアンサーボタン押せないようなのでこちらに書かせていただきました。すみません。
助言くださった方々回答してくださりありがとうございました！

投稿2020/03/21 02:34

mogumogu22

総合スコア24