Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 9004

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

$
0
0

スマートフォンのコーディングをしていた時、
別ページからのページ内リンクを実装していたら、
一部リンクのみ勝手に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><ahref="/index.html">Top</a></li><li><ahref="/index.html#vision">Vision</a></li><li><ahref="/service.html">Service</a></li><li><ahref="/index.html#company">Company</a></li><!-- ←問題のリンク --></ul></nav><section>
// コンテンツ内容は略
</section><sectionid="vision"><!-- ←ここへはちゃんとたどり着く -->
// コンテンツ内容は略
</section><section><divid="js-list-member"class="section-member-list-wrap"><ulclass="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><sectionid="company"><!-- ←ここはずれる -->
// コンテンツ内容は略
</section>
jQuery(function(){'use strict';// bxSliderjQuery('#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


Viewing all articles
Browse latest Browse all 9004

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>