2020.10.18  2021.04.04

iPhone「iOS」でCSSアニメーションが誤動作する原因と解決方法を紹介

皆さんこんにちは!マコブログです!

今回は、iOS(アイフォン)で、CSSのanimationが誤動作する原因について解説したいと思います。

また、その解決方法についてもご紹介するので、iOS、アイフォンでCSSアニメーションがうまく動かない人は今回の記事を読んでください。



それでは、始めましょう。

iOSでアニメーションが動かない原因

まずは原因を調べないといけませんね。

実際にPC(パソコン)やアンドロイドでも確認してみて、本当にiOSでしか動かないのかを確認してください。
※ちなみに、PCのデベロッパーツールでSP(スマートフォン)表示にして動いていても、アイフォンの実機で動いていない可能性があるので、ちゃんと実機で確認してください。

上記の確認が終わりましたら、実際にどのような現象が起きるのかを確かめてみてください。



一番多く発生するのは、画像にanimationをつけている場合です。
※画像にanimationをつけてOPアニメーションなどを作成している場合は要注意です。

結論から申し上げますと、「画像の読み込みよりも先にCSSコードを読み込んでしまい、画像の幅がアニメーションに干渉すること」が原因です。

分かりやすく説明すると、通常WEBサイトでは、まずHTML要素を読み込み、そこからリンクされているファイルなどを上から順番に読み込んでいきます。
ですが、画像は読み込みに時間がかかる場合があります。

画像が読み込まれていない状態で、CSSファイルを読み込んだことが原因で、transform等のアニメーションが誤作動するのです。

画像の読み込みが原因の理由

HTMLで画像を表示させるとき、ブラウザはimgタグを認識しますが、その画像のサイズを把握していないままcssの読み込みを行います。

画像のサイズが把握できていない場合、ブラウザは画像の幅を0からスタートし、適切な幅と高さを設けようとするのです。
↑↑↑↑↑
これがCSSファイルの読み込みに間に合わなくて誤作動する。といった感じですね。

解決方法

原因が分かったところで、解決方法を探していきましょう。

まず挙げられるのは、HTML要素を読み込んでからCSSファイルを読み込むことです。
ですが、画像を読み込んでいる間ずっとユーザーを待たせるわけにはいきませんよね。

そこで、アニメーションの記述がされた部分だけを別のCSSファイルに分け、通常のCSSファイルは普通に読み込ませる方法があります。

例えば、あなたが今common.cssというcssファイルを読み込んでいるとしましょう。
その中にはアニメーションの記述やレイアウトの記述があると思います。
そのアニメーションの記述のみをanime.css等のCSSファイルに記述して、読み込む順番を工夫していこうという話です。

jQueryを使用して、CSSファイルの読み込む順番を変える方法はこちらです。↓↓↓↓

<link rel="stylesheet" type="text/css" media="all" href="./common.css" />
<script type="text/javascript" src="CDNなどでjQueryを読み込む"></script>
<script>
  $(function(){
     var style = '<link rel="stylesheet" type="text/css" media="all" href="./anime.css" />';
     $('head link:last').after(style);
  });
</script>

これで、レイアウト用のcommon.cssは通常の読み込み、アニメーション用のanime.cssは遅延読み込みの処理が完了しました。

上記の記述が適用されたら、実機で確認してみてください。

解決方法(改)

上記の記述でも変わらん!という方はこちらも参考にしてみてください。

それは、画像自体にあらかじめサイズを記述しておくことです!

HTML5で、imgタグを使用している方ならご存じだと思いますが、
imgタグは、widthとheightという指定ができます。



これを使用して、HTML要素にあらかじめ画像の幅と高さを記述することで、
画像の幅がアニメーションに干渉することはなくなります。
※ブラウザが読み込み時に、画像の幅をあらかじめ確保してくれるようになり、それを参照してCSSアニメーションが動作する。よって画像の幅がアニメーションに干渉しなくなるという理屈です。

まとめ

いかがでしたでしょうか?

今回は、iOSでcss animationが誤動作する原因と、その解決方法についてご紹介しました。

今の時代、WEBはモバイルファーストとなっており、PC(パソコン)よりもSP(スマートフォン)表示に力を入れるようになりました。

アニメーションというサイトの一番の見せ所で誤作動なんて御免ですよね。

今回の記事を読んでサイト制作者やプログラミング初心者の方のお力になれたらと思います。
こちらの記事も是非チェックしてみてください↓
WordPressでページャーが表示されないバグの解決方法

それでは!また次回の記事で!

あなたにオススメの記事
マコブログ
Makoto
高校卒業と同時にプログラミングを学習しはじめ、今年で4年目になります。
普段はフロント周りで作業をしていて、WordPressの開発とSEO対策には自信があります。
マコブログでは、プログラミングやSEO対策についての情報を発信しています。

よく読まれる記事

S&P500研究所

【マコブログ 2nd】S&P500研究所がOPENしました!!

Read More →