Скрыть панель прокрутки от горизонтальной прокрутки Div на мобильных устройствах

Question

Мне нужно спрятать полосу прокрутки на элементе div с горизонтальной прокруткой.Я могу скрыть его на рабочем столе, но на мобильных устройствах он сохраняется (в частности, я пробовал на iPhone Safari).

Я знаю, что это возможно, потому что если вы переходите на сайт Apple здесь на своем смартфоне, который вы видите, чуть ниже заголовка, их продукты прокручиваются без какой-либо полосы прокрутки.Я проверил код, но, похоже, мой.

Я использую этот код:

div.container-horizontal-scroll {
  // Set horizontal scroll
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;

  // Hide scrollbar
  -ms-overflow-style: none;  // IE 10+
  scrollbar-width: none;  // Firefox
  &::-webkit-scrollbar {
    display: none;  // Safari and Chrome
    width: 0 !important;
  }

}

Есть идеи, почему он не работает?Спасибо