Safari에서 다른 페이지에서 시작된 페이지 내 링크의 위치가 잘못된 문제는 JS의 영향입니다
다른 페이지의 페이지 내 링크가 설치된 경우
일부 링크만 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
Reference
이 문제에 관하여(Safari에서 다른 페이지에서 시작된 페이지 내 링크의 위치가 잘못된 문제는 JS의 영향입니다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sararilfy/items/966c11595c70fe2a9bd6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)