Host様
お世話様です。
情報共有のために書き込んだのですが、ご返信いただきありがとうございます。
私の環境です。
iPhone12ProMax、iOS14.4.2です。
”iOS デバイスで Web ページにアップロードした画像を表示できず”というのとはちょっと違うのです。
どこかのクラウドにアップした写真の参照用URLをWEB上に貼っただけの場合は問題なく見ることができます。
ただ、画像カルーセルをGoogle Siteで作成する際に、jQueryやSlickを使用せず、HTMLとCSSだけで書いた場合に、iOSデバイスからは何も表示されないという症状がでております。
Google Siteには直接jQueryやSlickを置くことができないため、HTMLとCSSだけで書いたほうが扱いやすいのです。
（他のFTPにjQueryやSlickを置いて参照してもいいんだけど、トラブったときに原因究明が面倒になるのでやってません）
例えばGoogleSiteに下記のような書き方をして埋め込んだ場合です。
ーーーーー
<div id="stage">
<div id="stage">
<div id="photo1" class="photo"><img src="https://drive.google.com/uc?export=view&id=hogehoge1"></div>
<div id="photo2" class="photo"><img src="https://drive.google.com/uc?export=view&id=hogehoge2"></div>
<div id="photo3" class="photo"><img src="https://drive.google.com/uc?export=view&id=hogehoge3"></div>
<div id="photo4" class="photo"><img src="https://drive.google.com/uc?export=view&id=hogehoge4"></div>
<div id="photo5" class="photo"><img src="https://drive.google.com/uc?export=view&id=hogehoge5"></div>
<div id="photo6" class="photo"><img src="https://drive.google.com/uc?export=view&id=hogehoge6"></div>
<div id="photo7" class="photo"><img src="https://drive.google.com/uc?export=view&id=hogehoge7"></div>
<div id="photo8" class="photo"><img src="https://drive.google.com/uc?export=view&id=hogehoge8"></div>
<div id="photo9" class="photo"><img src="https://drive.google.com/uc?export=view&id=hogehoge9"></div>
<div id="photo10" class="photo"><img src="https://drive.google.com/uc?export=view&id=hogehoge10"></div>
</div>
<div id="rec1" class="rec"></div>
<div id="rec2" class="rec"></div>
<div id="rec3" class="rec"></div>
<div id="rec4" class="rec"></div>
<div id="rec5" class="rec"></div>
<div id="rec6" class="rec"></div>
<div id="rec7" class="rec"></div>
<div id="rec8" class="rec"></div>
<div id="rec9" class="rec"></div>
<div id="rec10" class="rec"></div>
</div>
<style type="text/css">
#stage {
position: relative;
max-width: 600px;
margin: 0 auto;
}
.photo {
position: absolute;
width:100%;
}
.photo img {
width: 100%;
height: auto;
visibility:hidden;
animation: imgTrans 60s infinite;
}
#photo1 img {
animation-delay: 0s;
}
#photo2 img {
animation-delay: 6s;
}
#photo3 img {
animation-delay: 12s;
}
#photo4 img{
animation-delay: 18s;
}
#photo5 img {
animation-delay: 24s;
}
#photo6 img {
animation-delay: 30s;
}
#photo7 img {
animation-delay: 36s;
}
#photo8 img {
animation-delay: 42s;
}
#photo9 img {
animation-delay: 48s;
}
#photo10 img {
animation-delay: 54s;
}
#frame {
max-width: 600px;
height: auto;
position: relative;
overflow: hidden;
}
.rec {
width:20%;height:338px;background:#fff;
position:absolute;
top:0;
opacity:0;
animation: sliceaction 6s infinite;
}
#rec1 { left:0;
animation-delay: -0.4s;}
#rec2 { left:10%;
animation-delay: -0.3s;}
#rec3 { left:20%;
animation-delay: -0.2s;}
#rec4 { left:30%;
animation-delay: -0.1s;}
#rec5 { left:40%;
animation-delay: 0s;}
#rec6 { left:50%;
animation-delay: 0.1s;}
#rec7 { left:60%;
animation-delay: 0.2s;}
#rec8 { left:70%;
animation-delay: 0.3s;}
#rec9 { left:80%;
animation-delay: 0.4s;}
#rec10 { left:90%;
animation-delay: 0.5s;}
@keyframes imgTrans {
0% { visibility:hidden;}
2% { visibility:visible;}
6% { opacity:1;}
9% { visibility:hidden;}
9% { opacity:0;}
100% { opacity:0;}
}
@keyframes sliceaction {
0% { opacity:1;}
5% { opacity:1;}
8% { opacity:0;}
80% { opacity:0;}
95% { opacity:1;}
100% { opacity:1;}
}
</style>
ーーーーー
MacのブラウザからはSafari以外でも思った通りの表示がされるため、文法的には問題ないと思います。
また、iOSデバイスからでもこれを埋めこんだサイトのURLに独自ドメインを割り当てた際には問題なく表示されます。
今回はGoogle Siteでの検証ですが、他のサイトでも同じような症状があるとの情報があります。
ただ、それらの情報に関して詳細が書かれていないので、他サイトでの動作確認はしていません。（というかできない）
この症状の原因がiOSにあるのか、Google Siteに原因があるのか判断できないのですが、とりあえずGoogle Siteでも独自ドメインを割り当てればカルーセルは表示されるので、対処法がわかった現在は問題なく稼働しています。
あまりにもニッチな事象ですので、情報共有の意味は薄いかもしれませんが、Dropboxでホームページにアップした画像がiPadで見た時だけ表示されないですが完全解決していなさそうですので、とりあえず書いてみました。
問題が起こるのはオリジナルのURL、つまり https://sites.google.com/site/hogenoge にiOSデバイスでアクセスした時だけです。
iOSデバイスのSafari以外のブラウザ、例えばFireFox,Chrome、Braveでアクセスしても表示されません。
