iphoneでナビゲーションの横スクロールを実現したい

cssでナビゲーションの横スクロールを実装しようとしているんですが、うまくいきません。
環境はiphone5c、iOS 10.3.3、safari 602.1です。
下記のようにコードを書いているんですが、iphoneでは全くスクロールできません。
PCやXperiaでは問題なくスクロールできています。
ご教授よろしくお願い致します。

<div class="navigation">
  <ul>
    <li>nav1</li>
    <li>nav2</li>
    <li>nav3</li>
    <li>nav4</li>
  </ul>
</div>

.navigation {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  width: 100vw;
}