Web制作(Webサイト)のモバイルエラー

Question

前提・実現したいこと

HTML/PHP/JS/CSSで以下のWebサイトを制作しています。
https://rays-s.com
実現したいこととしては、モバイルでエラーなく表示することです。

発生している問題・エラーメッセージ

Iphone8のような少し前のデバイスで閲覧した際に、
「問題が繰り返し起きました」
といった内容が表示され、ページを読み込むことができません。
Iphone11やIphone10Rであれば閲覧可能です。

【2020/6/2追記】
JSをすべてコメントアウトしても同様のエラーが発生
キャッシュのクリア等は対応済
TOPに複数配置している画像をコメントアウトするとなおりました。
TOPの配置をそのままで、再読み込みエラーが発生しないようにしたいです。

該当のソースコード

【2020/6/2追記】
■TOPイメージはこの記述で120まで作成

<div class="top-animation"><img class="top-img-1" src="IMG/TOP_1.JPG" alt="資料作成例1"></div> ■CSS　画像ごとにこんなものを指定 .top-img-25{ width:40%; max-width:150px; position:relative; bottom:1800px; left:350px; }

モバイルでは不要の画像にはこんなものを指定
.top-img-24{
display:none;
}
■CSS　アニメーションにはこんなものを指定
.top{
margin: 0 auto;
width:100%;
height: 100vh;
position: relative;
z-index: 1;
background-color: #F2F2F2;
overflow: hidden;
}

.top-animation{
	width:100%;
	left:0px;
	bottom:0px;
	position: absolute;
	-webkit-animation: Loop 60s linear infinite;
	-ms-animation: Loop 60s linear infinite;
	animation: Loop 60s linear infinite;
}

@keyframes Loop {
	0% {
		transform:translate(-100%,100vh);
		-webkit-transform:translate(-100%,100vh);
		-ms-transform:translate(-100%,100vh);
	}
	to {
		transform:translate(100%,-100vh);
		-webkit-transform:translate(100%,-100vh);
		-ms-transform:translate(100%,-100vh);
	}
}

@-webkit-keyframes Loop {
	0% {
		transform:translate(-100%,100vh);
	 	-webkit-transform:translate(-100%,100vh);
	 	-ms-transform:translate(-100%,100vh);
	}
	to {
		transform:translate(100%,-100vh);
		-webkit-transform:translate(100%,-100vh);
		-ms-transform:translate(100%,-100vh);
	}
}

@-ms-keyframes Loop {
	0% {
		transform:translate(-100%,100vh);
		-webkit-transform:translate(-100%,100vh);
		-ms-transform:translate(-100%,100vh);
	}
	to {
		transform:translate(100%,-100vh);
		-webkit-transform:translate(100%,-100vh);
		-ms-transform:translate(100%,-100vh);
	}
}

試したこと

画像サイズの圧縮等は対応済です。
全体としては、約7MBほどです。
(Google FontやGA込み)
対策を調べましたが、わからず、ご教示いただけますと幸いです。
JSコメントアウト済　⇒　治らず
キャッシュ履歴　⇒治らず
TOP画像を全部コメントアウト　⇒治った

補足情報（FW/ツールのバージョンなど）

Comments

[m.ts10806]

提示されているのはソースコードではありません。どのように組まれているのでしょうか。
サーバーサイドの問題であればWebサイトを直接みなければならないケースは多くはないです(宣伝だと捉えられます)

[rays]

ソースコードとおっしゃっているのは、html全てを貼るとゆうことでしょうか？何のコードが影響を与えているかさえわからないため、こちらで確認をさせていただいております。(必要であればhtmlとcssを貼り付けます。)
ソースコードはwebサイト上で確認出来るかと存じますので、お手数ですがお力添えいただけますと幸いです。。。(ここにサイトを貼って宣伝したところで大した効果は得られないと思いますので、そういった目的ではありません。)

[rays]

強いてゆうならば、TOP画像を読み込む際に落ちるため、おそらくトップの仕様が悪いのかと予想しています。
複数の画像が左下から右上に流れるようなコーディングをしており、cssのanimation、translate等を使用しております。TOPの画面外右上から画面外左下まで画像を配置の上、TOPのdivをマイナスから流すようにコーディングしています。(当方、素人でして、おそらくもっといい実装方法があるとは思いますが、無理くりやっているような状況です。)

[rays]

素人すぎて説明が分かりにくいかもしれません。先程いただいたような指摘を是非いただけますと幸いです。
これまでのことは大抵調べれば何となかったのですが、いかんせん、情報が落ちておらず。。。
何卒よろしくお願いいたします。

[AkitoshiManabe]

> 何のコードが影響を与えているかさえわからない
正直に申しますと、アウトソージング系サイトで仕事を依頼されるのが相応しい状況と思います。ご自身で管理・運営しているのであれば、少なからずエンジニアとしての知識を有しているはずで、質問内容には使用ライブラリやプラグインなどを列挙、自分なりに試したことを記述できるはずです。
> お力添え
バージョンの異なる２つのjQueryを読んでいるのは不自然です。そこから探ってみてください。
プラグインはコアのバージョンに依存する可能性があります。

[m.ts10806]

ガイドラインにあるように、現象が再現できる最小構成のコードを組んでみると良いのではと。
さすがに「全部みて全部探して」では質問になってません。しかも8というと既に販売終了しているモデルなので、再現困難では？
少なくとも、マルチデバイス対応を日々しているような開発会社でないと、全て確認しきるのは無理があります。

[hentaiman]

ちょーどiphone8あるので試しに開いたら確かにエラーが笑
端末持ちの人なら頑張れば原因究明出来るかもしれませんな

[rays]

ソースコードを追加してみました。。。
記載しましたが、TOP画像が悪さしているみたいです。。。
お手数ですが、お力添えいただけますと幸いです。。

よろしくお願いいたします。

[rays]

モバイルのデバイスごとで影響が出る前例がWeb上に全く落ちておらず、
参考になりそうなURL等あればそちらをご教示いただくだけでも構いませんので、よろしくお願いいたします。

[hentaiman]

そうなった事ないんで参考サイトも何も分かりませんが、デフォルトブラウザ以外のブラウザ入れれば端末依存かブラウザ依存かぐらい分かりますよ、という程度の調査手順のアドバイスぐらいしか言えませんな

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください。
どういうことかはヘルプページや他の質問や回答を参考にしてください。

Answer 1

「ページのソースを表示」でソースコードを見てみました。

,user-scalable=yesの位置が、""の外に出てしまっているので、直してみてもいいかもしれません。

<!-- 「,user-scalable=yes」が""の外に出てしまっている -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0",user-scalable=yes><!-- レスポンシブ対応用 -->

↓

<!-- 「,user-scalable=yes」を""の内に含める -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=yes"><!-- レスポンシブ対応用 -->

Comments

[rays]

対応しましたが、ダメでした。。。
ありがとうございます。

[m.ts10806]

「ダメでした」「うまくいかない」では伝わることは何もないですよ。
結果を確実にフィードバックしてください。