iOSブラウザでタップした要素が自動的に暗くなるのを防止する

なぜか折りたたみメニューがちらつく現象が発生

仕事でWebシステム作ってるんですけど、リスト型のメニューをslideToggleで折りたためるように変更したら、スマホで見るとタップするたびにリスト全体がちらつく現象が発生してしまいました。

PCのブラウザだと問題なかったのですが、iOSのブラウザで見たときに上記の現象が発生。

色々調べた結果、iOSブラウザは自動でタップした範囲が暗くなる設定がされているのですが、今回のはなぜかリスト全体が選択された状態になってしまっていて、ちらついたように見えることが判明しました。

HTMLはこんな感じ

<div id="menu">
    <div>
        <div class="list">めにゅー1</div>
        <ul>
            <li>アイテム1</li>
            <li>アイテム2</li>
            <li>アイテム3</li>
        </ul>
    </div>
    <div>
        <div class="list">めにゅー2</div>
        <ul>
            <li>アイテム1</li>
            <li>アイテム2</li>
            <li>アイテム3</li>
        </ul>
    </div>
</div>

.listの部分をタップするとul内がhideしたりshowしたりする、よくあるやつです。
これで、なぜか.listをタップすると#menuが全体的にタップされた状態になってしまうので、メニュー全体が一瞬暗くなる。でもhide,showの動作は問題なかったのが謎です。

id="menu"の部分全体が暗くなるとどうしてもメニューを開閉したときにちらついて見えるのが鬱陶しかったので、タップしたときに自動で暗くなるのを防止しました。

CSSで回避

#menu{
    -webkit-tap-highlight-color:transparent; 
}

タップした時にデフォルトでカラーが設定されないように指定。これでちらつきが回避できました！やった！
なぜid="menu"全体がタップされたと認識してしまったかは謎のまま…。
ひとまず、これでちらつきは回避できそうなのでよしとすることにしました。何日も悩んでいたのでスッキリ。

この回避策、スマホで見るサイト作るときは覚えておかないと面倒なことになりそうなので、メモとして残しておきます。

環境

iOS 11.2.5
ブラウザ　Safari, Chrome