スマートフォンのコーディングをしていた時、
別ページからのページ内リンクを実装していたら、
一部リンクのみ勝手に1000pxくらい下にスクロールされて、位置がずれてしまった。

すでに実装してあったJSを全て削除してから試してみると、ちゃんと動いたので、
JSの機能を一つずつコメントアウトしてクリックを試してみたところ、
bxSlider部分が影響していることがわかった。

※bxSlider（スライダープラグイン）
https://bxslider.com/

原因

PCのChromeのエミュレーターは、bxSliderが整形し終わった後の高さを見込んでページ内リンクの位置を割り出すのに、
SafariはbxSliderが整形する前の高さを元にページ内リンクの移動をするようで...。

どう対処したか

bxSlider部分を囲んでいるタグに、整形後を見込んだheightとoverflow: hidden;を前もってかけておくと、
bxSliderの整形での高さのずれが出にくく、解決しました！

.section-member-list-wrap { /* スライダーするリストを囲うタグのclass */
    height: 235px;
    overflow: hidden;
}

その他の抜粋ソースコード

<nav>
    <ul>
        <li><a href="/index.html">Top</a></li>
        <li><a href="/index.html#vision">Vision</a></li>
        <li><a href="/service.html">Service</a></li>
        <li><a href="/index.html#company">Company</a></li> <!-- ←問題のリンク -->
    </ul>
</nav>

<section>
// コンテンツ内容は略
</section>

<section id="vision"> <!-- ←ここへはちゃんとたどり着く -->
// コンテンツ内容は略
</section>

<section>
    <div id="js-list-member" class="section-member-list-wrap">
        <ul class="list-member">
            <li>
                <figure><img></figure>
                <h3>名前1</h3>
            </li>
            <li>
                <figure><img></figure>
                <h3>名前2</h3>
            </li>
            <li>
                <figure><img></figure>
                <h3>名前3</h3>
            </li>
</section>

<section id="company"> <!-- ←ここはずれる -->
// コンテンツ内容は略
</section>

jQuery(function () {
    'use strict';

    // bxSlider
    jQuery('#js-list-member .list-member').bxSlider({
        mode: 'horizontal',
        moveSlides: 1,
        slideMargin: 12,
        infiniteLoop: true,
        slideWidth: 154,
        minSlides: 3,
        maxSlides: 3,
        speed: 300,
        pager: false,
        controls: false,
    });
});

動作確認環境

iOS 13.3 Safari