長押し(ロングタップ)した時に表示される拡大鏡を抑止したい。iOS15-safari。

前提・実現したいこと

iOS15のsafariで、WEBページ上に表示されている要素（canvas, button等）を長押しした際に表示される拡大鏡を抑止したいです。

この機能はiOS13で一度廃止されましたが、iOS15で復活しました。

色々調べましたが、明確な回答や解決策がなく困っております。

iOS15のsafariで拡大鏡を抑止する方法を教えていただきたいです。

発生している問題（safariにて）

iOS12までは下記リンクにあるようにCSSで[-webkit-user-select:none]とすることで、ページ内のテキストや要素の選択を無効化することで拡大鏡の出現が抑止出来ていました。
https://stackoverflow.com/questions/27101308/disable-magnifying-glass-in-ios-html-app

しかし、iOS15では選択自体は無効になりますが、下記画像のように引き続き拡大鏡が出現し続けます。

該当のソースコード

デモコードになります。一部は下記からお借りしました。
https://codepen.io/nikspatel/pen/qrzBjX

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta 
     name='viewport' 
     content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'>
    <link rel="stylesheet" href="style.css">
    <title>Magnifying glass test</title>
</head>
<body>
    <div class="container">
        <div class="row">
          <div class="col-md-4">
            <div class="mag"> iPhone<br>
              <img  src="https://i.imgur.com/1fgr2IO.jpg" alt=""> </div>
          </div>
          <!--/span-->
          
          <div class="col-md-4">
            <div class="mag"> Lion<br>
              <img data-toggle="magnify" src="https://i.imgur.com/kzGVqbd.jpg" alt=""> </div>
          </div>
          <!--/span-->
          
          <div class="col-md-4">
            <div class="mag"> Mixer<br>
              <img data-toggle="magnify" src="https://i.imgur.com/YZ7AGyF.jpg" alt=""> </div>
          </div>
          <!--/span--> 
          <button id='testBtn'>HELLO</button>
          <input>
          <h1>HELLO</h1>
          <h2>hello</h2>
          
        </div>
        <!--/row-->
        <hr>
      <!-- / .container --> 
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="long-press-event.min.js"></script>
    <script src="index.js"></script>
</body>
</html>

* {
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-callout: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-modify: none;
    -webkit-highlight: none;
}

.mag {
    width:200px;
    margin: 0 auto;
    float: none;
}
    
.mag img {
    max-width: 100%;

}

下記画像の赤丸で囲った部分が問題の拡大鏡です。

これを抑止する方法を教えていただきたいです。