前提としてのhtml
　blockがクリックエリアとしてblock-imiageで背景画像を設置。
　hoverで画像切り替え
　基本クロームで閲覧
とした際に、iosなどでクリック・タップ時に画像が拡大したり縮小したりした。
windowsでもクリックエリア長押しで一部再現。

<div class="area">
  <a href="javascript:void(0)" class="block">
    <div class="block-image"></div>
  </a>
  <a href="javascript:void(0)" class="block">
    <div class="block-image"></div>
  </a>
</div>

.block {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;               // ← ダブルタップズームも防ぐ
}

画像をhover時に切り替える際、
backgroundにすべての指定を書いている場合
.block-image {
    background: cover no-repeat url("image.png");
}
.block-image:hover {
    background: url("image2.png"); //ここで画像のみしていてもNG
}

.block-image:hover {
    background-image: url("image2.png"); //background-imageのみで指定する
}

iOS ではタップ時に :hover が瞬間的に適用→解除されます。
transition: 0.2s と組み合わさって「上に動く→戻る」が素早く起きるため、小さくなったように見えます。
タッチデバイスでは hover の transform を無効化
@media (hover: hover) {
    .modal-block:hover {
        transform: translateY(-2px);
    }
}
(hover: hover) はマウスなど真のホバーが使えるデバイスにのみ適用されます。タッチデバイスでは無視されるため、タップ時のちらつきがなくなります。