Firefox не прокручивается по горизонтали при трансформации

Question

Я взял пример параллакса и разобрал его для использования. (https://css -tricks.com / чисто-CSS-горизонтальная прокрутка / ). Работает нормально, после долгих хлопот и подстройки.

Идея состоит в том, чтобы создать веб-страницу, на которой пользователь прокручивает страницу вниз, и когда он попадает в мою узкую секцию параллакса, дополнительная прокрутка перемещает параллакс справа налево. Когда весь раздел завершит горизонтальную прокрутку, дополнительная прокрутка заставит пользователя двигаться вниз по странице. Если пользователь прокручивает обратно вверх, когда он попадает в область моей горизонтальной прокрутки, параллаксная прокрутка переворачивается.

Горизонтальный эффект параллакса происходит от "нормального" вертикального параллакса, но весь элемент div переворачивается на бок с помощью "transform: rotate translate", как показано в CSS.

Как я уже сказал, все отлично работает в настольных Chrome, Safari и Opera. Но в Firefox это будет работать, только если пользователь переключится на горизонтальную прокрутку.

На моей беспроводной мыши Mac это означает перемещение пальца по горизонтали, что, вероятно, не знает обычный пользователь, не кодирующий код, или, по крайней мере, будет мешать его работе.

Кроме того, в моем css я меняю указатель, когда мышь находится над содержащим div, на «cursor: ew-resize;» который прекрасно работает и добавляет визуальную подсказку к происходящему, показывая курсор как <->.

Но в Firefox курсор меняется на «полностью прокручиваемый», как вертикальные, так и горизонтальные стрелки, как заостренный крестик.

После небольшого поиска в Google, похоже, была проблема с прокруткой в ​​Firefox, но, похоже, она была исправлена ​​в последних выпусках. В случае, если это было проблемой, я добавил в -moz-ms- -webkit- версии для преобразований поворота, которые, как я подозревал, имели нулевую разницу.

Мой HTML:

  <div id="scrollr">
  <div id="container">
    <div id="container2">
      <div class="box one">
        <div> <img class="devicesImgA" src="images/portfolioResponsiveicon1.jpg" alt="Websites on computer, tablet & phone screens"><img class="arrowIconR" src="images/portfolioArrowR.png" alt="Arrow icon"> </div>
      </div>
      <div class="box two">
        <div> <img class="devicesImgA" src="images/portfolioResponsiveicon2.jpg" alt="Websites on computer, tablet & phone screens"><img class="arrowIconR" src="images/portfolioArrowR.png" alt="Arrow icon"> </div>
      </div>
      <div class="box three">
        <div> <img class="devicesImgA" src="images/portfolioResponsiveicon3.jpg" alt="Websites on computer, tablet & phone screens"><img class="arrowIconR" src="images/portfolioArrowR.png" alt="Arrow icon"> </div>
      </div>
      <div class="box four">
        <div> <img id="devicesImgB" src="images/portfolioResponsiveicon4.jpg" alt="Websites on computer, tablet & phone screens"> </div>
      </div>
    </div>
  </div>
</div>

CSS:

 #scrollr {
position: relative;
display: block;
width: 100%;
height: 700px;
  }
 #container .box {
width: 100%;
height: 550px;
display: inline-block;
position: relative;
cursor: ew-resize;
 }
  #container .box > div {
width: 100%;
height: 1000px;
color: #FFF;
position: absolute;
font-weight: bold;
  }
  #container {
overflow-y: scroll;
overflow-x: hidden;
-ms-transform: rotate(270deg) translateX(-700px); /* IE 9 */
-moz-transform: rotate(270deg) translateX(-700px); /* Firefox*/
-webkit-transform: rotate(270deg) translateX(-700px); / Safari */
transform: rotate(270deg) translateX(-700px);
transform-origin: top left;
position: relative;
display: block;
width: 700px; /* Rotated, so height */
height: 70vw; /* Rotated, so width */
  }
  #container2 {
-ms-transform: rotate(90deg) translateX(-700px); /* IE 9 */
-moz-transform: rotate(270deg) translateX(-700px); /* Firefox*/
-webkit-transform: rotate(90deg) translateX(-700px); /* Safari */
transform: rotate(90deg) translateY(-700px);
transform-origin: top left;
white-space: nowrap;
font-size: 0;
height: 700px;
position: relative;
width: 900px;
  }
  .devicesImgA {
max-width: 100%;
height: auto;
margin: 4% 0 0 0;
position: relative;
display: inline-block;
  }

Итак, что мне делать, чтобы горизонтальная прокрутка работала в Firefox, не прибегая к другому движению прокрутки?