iOSで:hoverに擬似要素を設定した時に発生するバグの対策

iOSでホバー領域のリンクがダブルタップしないと反応しない

iOSのバージョンのバグ？なのか、既に色々と解決策について出回っているようですが、現状の対応策について備忘録としてまとめました。
よりよい方法などがあればご指摘ください！

今回対象とするHTMLとCSSは下記の通りです。

index.html

<div>
  <h2>ニュース</h2>
  <ul>
    <li><a href="" class="hover__link">カテゴリ</a></li>
    <li><a href="" class="hover__link">カテゴリ</a></li>
  </ul>
  <a href="">テキスト</a>
</div>

styles.css

  .hover__link {
    display: flex;
    align-items: center;
    padding: 0 15px;
    height: 100%;
    color: #222;

    &:hover {
      background: $hover_color;
      text-decoration: none;

      &:after {
        content: '';
        position: absolute;
        left: 40px;
        bottom: 10px;
        width: 5px;
        height: 5px;
        border-top: 2px solid $main_color;
        border-right: 2px solid $main_color;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
      }
    }
  }

対応策

1.JavaScriptでユーザーエージェントを取得し、iOSでhoverを無効に指定

プラグイン（Device.jsなど）を使うかネイティブで記述してデバイスを判別し、iOSの時は不具合が発生しているセレクタに対してhoverの無効にする処理を入れる。

2.メディアクエリでブレイクポイント以上の場合だけホバーを適用

ブレイクポイントを720pxで指定している場合は、min-widthでプラス1pxした幅を設定しhoverを設定する。

styles.css

@media screen and (min-width: 721px) {
  .hover__link {
    &:hover {
      background: $hover_color;
      text-decoration: none;
      &:after {
        content: '';
        position: absolute;
        left: 40px;
        bottom: 10px;
        width: 5px;
        height: 5px;
        border-top: 2px solid $main_color;
        border-right: 2px solid $main_color;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
      }
    }
  }
}

3.メディアクエリでスマホ幅の時は擬似要素を打ち消す

現状では、原因がはっきりしないようですが、hoverに擬似要素を設定すると、現象が発生するようなので、今回は対象の要素が限られていることもあり、こちらの方法で対応しました。

参考サイト

@wakamshaさんのAltJS,AltCSS課題をGulp, SCSS, TypeScript でやってみた ｜ Developers.IO
ざっくりGulp.js入門（Mac向け）
JavaScriptでユーザーエージェントを取得しclassを付与する