サイト訪問時に流れるムービーが現れない、別セクションが現れてしまう

Question

■ 当該サイト
http://zero-tokyo.jp/

■ 問題点

本来アニメーションもしくはフラッシュムービーのようなものが流れた後にトップページが現れるはずなんですが、スマホで見たところ、下記画像のようにコンセプトムービーを紹介するセクションが現れてしまいます。
PCではちゃんとムービーが最初に流れます。
※デベロッパーツールでは確認できません。実機（iPhone5s/6）でこのような現象が起きます。

■ 行ってみたこと

このセクションのclassにposition:relativeが入っていたのでそれが原因かと思ったのですが、上手く治りませんでした。z-indexの問題かとも思いましたがどうやら違うようです。

■ 今回お願いしたいこと
こちらの原因と解決策を教えていただけますでしょうか？

Answer 1

.content2の高さをjsで設定されているようですが、
iOS Safariだと画像のloadが終わってない場合、width、heightがうまく取得できない場合があります。

▼参考
Safariでは画像のloadが終わっていないとwidth、heightがうまく取得できない
http://hisasann.com/housetect/2008/08/safariloadwidthheight.html

これが原因の場合、
.c1Area .content2
こちらのスタイルにあらかじめ高さを指定していくとうまくいく場合があります。
または、
画像の読み込みが終わった後に高さを付与してみるのも試す価値があるかもしれないです。

※ あくまで予測なのでこれが原因とは限りませんが...

Comments

[takumaro_web]

■補足
一度、それが原因かどうかを確かめるために

alert($(".content2").height());

この記述を入れて検証してみてください。
この数値が"0"の場合、うまく取得できていないことになります。
うまくいっている場合は、正しい数値が現れます。