带有水平滚动菜单的iOS上的间距问题

Question

我在iOS上遇到水平滚动菜单问题。在iOS上，文本重叠：

但是当我使用Chrome的开发工具检查时，在各种设备中看起来很好：

这里是CSS：

#sub-menu ul {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 500;
    line-height: 40px;
    text-transform: uppercase;
    font-size: 0.875em;
    letter-spacing: 2px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    margin: 0 auto;
    list-style: none;
    max-width: 1168px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    cursor: pointer;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}

在此处试试：http://jsbin.com/gocuwayoca/5/

我正在努力找出我做错的事情。