ページ外遷移のアンカーリンクでスクロールアニメーションのあるページ飛ぶとフッターまでずれる

Question

in-view.jsというライブラリを使って、スクロールするとアニメーションで出てくるページにアンカーリンクで遷移するとidを設定した箇所ではなく、最下部までいってしまい、CSSも切り替わらずヘッダーとフッター以外は真っ白になります。
この現象はSafariとFirefoxにだけみられます。
スクロールするとDOM操作でCSSを上書きして要素が現れるようにしてます。

##やりたいこと
目的の要素までページ外遷移で移動して、同ページの他の要素は既に表示された状態にしたいです。

---

in-view.js

<script>
  inView.offset(400);
  inView('.fadein')
    .on('enter', el => {
      //入ったとき
      el.classList.add('scrollin')
    })
</script>

.fadein {
  opacity: 0;
  transform: translate(0, 50px);
  transition: all 500ms;
}

.fadein.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}
.effect > div.fadein:nth-of-type(2) {
  transition-delay:200ms;
	-moz-transition-delay:200ms;
	-webkit-transition-delay:200ms;
	-o-transition-delay:200ms;
	-ms-transition-delay:200ms;
	}
/* 3つ目の要素に400msのdelayをかける */
.effect > div.fadein:nth-of-type(3) {
  transition-delay:400ms;
	-moz-transition-delay:400ms;
	-webkit-transition-delay:400ms;
	-o-transition-delay:400ms;
	-ms-transition-delay:400ms;
	}

##考えられる原因として
私見になりますが、アンカーリンクによって目的の箇所にスクロールなしで移動してしまった為にCSSが切り替わらずに、要素が現れないのかと思っていますが、それなら位置は目的の箇所に移動してもいいはずなのではっきりわかりません。
##試してみたこと

このページを参考に下記のコードを書いてみましたが知識不足の為か解決には至りませんでした。よろしくお願いいたします。

<script>
  window.addEventListener('load', (event) => {
    anchor_load();
  });

  function anchor_load() {
    let url = location.href;
    if (url.indexOf("?id") != -1) {
      debugger;
      let id = url.split("?id=");
      let target = (id[id.length - 1]);
      if (target.length) {
        let test = document.getElementById(target)
        let position = test.getBoundingClientRect();
        let event = document.getElementsByClassName('fadein');
        event.classList.remove('fadein');
        window.scroll(0, position)
      }
    }
  }
</script>

##想定しているURIフラグメントとhtml

http://localhost:8080/flow/#waribiki

長いので、申し訳ないですがGoogle Driveにて共有させていただきます。
HTMLファイル

Comments

[Lhankor_Mhy]

HTMLと想定しているURIフラグメントをご提示いただけますか？

[Azulily]

追加しました、よろしくお願いいたします。

[Lhankor_Mhy]

HTML 拝見しました。
#waribiki は、HTMLの下の方にあるようなので、ページの最下部まで行ってしまうのは仕方がないように思うのですが、実際のページではそうではないのですか？

[Lhankor_Mhy]

リンクされている inview.js の github を拝見しましたが、

inView.offset(400)

のようなコードの例がありませんでした。
このコードは何かを参考にして書いたのですか？

[Azulily]

たしかに、その可能性はありそうです。もっと上の真ん中のあたりの要素に別のフラグメントを設置したり、#waribikiを少し上の位置に移動させてみました、ページの最下部ではなく少し上の位置に遷移しました。chromeやedgeで見る限りフラグメントを設置した要素がヘッダーの下に隠れるぐらいで止まってくれるのに対してSafariだとフラグメントがヘッダーに隠れるどころか、300pxほど下にずれてしまいます。
Firefoxだと、一旦はchromeと同じようにヘッダーの下でフラグメントの箇所が止まるものの、Safariと同じ位置まで移動します。(この現象はフラグメントを少し上の位置に移動させたときになるもので、当初の想定通りの位置だと起こりません）

[Lhankor_Mhy]

いくつかの要因が混じっているように思えます。
整理しながらひとつづつ解決した方がよさそうです。

[Azulily]

似たようなライブラリでも、使っているのは別のin-view.jsでした。
ご指摘ありがとうございます。リンク先は修正しました。

[Lhankor_Mhy]

当方で、「最小限かな？」という感じのコードを書いてみましたところ、問題なく動作しました。
ですので、おそらく、別のスクリプトなどと衝突しているのだと思います。

[Azulily]

ありがとうございます、そのヒントを受けてSafariのタイムラインで見てみたところ、使っているテーマの機能で(lazysizes.js)を使って遅延読み込みさせるものがあったのでそちらを停止させてみたところうまく行きました。

Answer 1

lazysizes.jsと競合していたようです。こちらを停止させたところ解決しました。