スマホで画像リンクのリンク位置がずれる

画像リンクで、PCとスマホで画像を入れ替えて表示させています。
PC表示は問題ないのですが、スマホのときに画像とリンク位置がずれている？のか、
タップしても数回〜１０回に一回ぐらいしかリンクが開きません。
画像の下の方だと割とリンクが開きます。

画像リンクの場所は何箇所かあり、全て同じ現象です。
場所によっては全く反応しないものもあります。
原因がつかめず困っております。よろしくお願いします。

html
1<section class="section1">   
2<div class="bnr_01">
3      <div class="img_pc">
4	<a class="img-link" href="test.html"> <img src="img/bnr_01.png" alt="テスト用"></a>
5	</div>         
6      <div class="img_sp">
7	<a class="img-link" href="test.html"> <img src="img/bnr_01.png" alt="テスト用"></a> 
8	</div>
9</div>
10</section>

CSS
1.section1{
2    display: block;
3    width: 100%;
4    margin:0 auto;
5    text-align: center;
6}
7.bnr_01 .img_pc{
8    display: inline-block;
9    width:61.5%;
10    max-width: 800px;
11}
12.bnr_01 .img_sp{
13    display: none;
14}
15
16.bnr_01 img{
17    width: 100%;  
18}
19@media screen and (max-width: 768px) {
20    .bnr_01 .img_pc{
21        display: none;
22    }
23    .bnr_01 .img_sp{
24        display: inline-block;
25        width:86.67vw;
26        max-width: 650px;
27    }
28}
29

CSS
1img {
2
3  display: block;
4  border: none;
5  line-height: 0;
6  -webkit-backface-visibility: hidden;
7}
8a.img-link{
9  display: block;
10  overflow: hidden;
11  text-indent: 100%;
12  white-space: nowrap;
13  background-size: contain;
14  background-position: 0 0;
15  background-repeat: no-repeat;
16
17}
18a.img-link img {
19	opacity: 1;
20}
21a.img-link:hover img {
22    opacity: 0.5;
23}

Lhankor_Mhy

2022/04/09 00:37

ご提示のコードを試してみましたが、問題が再現しませんでした。おそらく、ご提示の部分には原因はなさそうに思います。ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。問題再現の手順をもう少し詳しく書いていただけますか？

HiraKazu1124

2022/04/09 07:15

「a.img-link」のCSSがなんだか気になりますね...🤔 表示の関係なのかと推測しますが、「text-indent」の設定とかは必要なんでしょうか？ダメ元で、「img-link」のクラスを無くしてテストしてみてはどうでしょうか？👀 実は「background-image」に画像を指定して使うはずだった...とかでは無いですよね？😅 （たまにスマホの画像長押し対策で私もその手法を使うので👀）提示のコードで、これが原因で動いていない！...と確信できるようなものも無いので他のコードで原因が潜んでいる可能性も大ですが😅

Tombo

2022/04/09 08:25

お二方様、コメントありがとうございます。ご指摘の通り、上記コード以外にも他のオブジェクトやコードが配置してある状態で試しておりました。オブジェクトを一つづつ外して試して、自己解決いたしました。原因は、スマホのハンバーガーメニューを閉じている時に visibility:hidden、かつ z-index:1000 で配置してあり、これがタップできない原因でした。ハンバーガーメニューを　display:none　にしたところタップできるようになりました。上記コードに問題ないとコメントいただけて助かりました。ありがとうございました。