Help us understand the problem. What is going on with this article?

Safariで別ページからのページ内リンクの位置がずれる問題はJSの影響だった

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

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

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

原因

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

bxSlider 整形前
bxSlider 整形後

どう対処したか

bxSlider部分を囲んでいるタグに、整形後を見込んだheightoverflow: 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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした