Почему в mobil Safari появляется горизонтальная прокрутка при значении overflow-x: hidden?

Есть сайт diffi.ru, на нём реализована многоуровневая мобильная навигация prntscr.com/e4chka которая работает на js и сss transform: translateX. Меню появляется за счёт сдвиг body вправо, обратно скрыть меню можно только:
1. По нажатию специальной кнопки prntscr.com/e4cire
2. Тапнуть по пустой области body prntscr.com/e4ciyg
Свайпом по самому меню смахнуть его нельзя prntscr.com/e4cjbg

Проблема:
Всё это прекрасно работает на chrome и Android, но на mobile safari на iphone появляется горизонтальная прокрутка, которая позволяет смахивать меню свайпом плюсом ко всему всё ужасно дёргается.
Что сделанно:
Стоит overflow-x: hidden; width:100%; на теге но safari игнорирует этот стиль.
Ссылки на код:
JS diffi.ru/bitrix/templates/Cornery/js/mlpushmenu.js
CSS: diffi.ru/bitrix/templates/Cornery/template_styles.css
Как пофиксить эту проблему?