【備忘録】モーダルウインドウとコンテンツフェードインの相性—iPhoneで表示エラー

2021.02.26

この記事は約2分で読めます。

最近あったプチトラブル

最近お仕事で、近頃メジャー使いになったコンテンツがフェードインするタイプのサイトを制作しておりました。そしてポップアップを同時にということでモーダルウインドウで頻繁に使っていたColorboxを併用したのです。パソコン、Androidはいいのですが、ダメだったのがiPhone、iPad。モーダルの際に指定した背景色のせいかもしれませんが、モーダルウインドウ内に文字が現れない…。z-index触ってもダメでした。

原因を探る

ググるとiPhoneで挙動しないとかはあるんですが、どうにも内容が異なり…さらにググるとスムーススクロールと干渉する場合があるみたいで、そのページにはスムーススクロールを削除したとあったのですが、今回はそんなわけにはいかない！ということでいくつかテストしたところ、私の場合はスムーススクロールではなくてコンテンツがスクロールによってフェードインするjsが干渉することが分かりました。

解決策を探る

CSSでコンテンツをフェードインする手もあるのですが、動作上それでは意図した動きにならないので今回はパス。使ったのは違うタイプのモーダルウインドウです。
使わせていただいたのはcoding-laboのサンプル。

http://coding-labo.asia/javascript/modal-3/

コンテンツフェードインは

$(function () {
  $(window).on('load scroll', function () {
    $('.hoge').each(function () {
      var target = $(this).offset().top;
      var scroll = $(window).scrollTop();
      var height = $(window).height();
      if (scroll > target - height) {
        $(this).addClass('active');
      }
    });
  });
});

こういうのを使用しました。実際の動きは他の方のリンクを付けておきます。

https://codepen.io/recooord/pen/vbgdOx

この組み合わせでCSSを自分のサイト環境に合わせてカスタマイズしたら、ちゃんと表示されました。
テストしていないけれど下記もなかなか良さそうな感じ。

https://spyweb.media/2017/09/21/modal-window-fixed-background-also-support-ios/

そんなわけで備忘録としてメモしておきます。