Горизонтальная прокрутка с вертикальным расположением css, полоса прокрутки не видна при преобразовании

Question

У меня есть элемент на странице с горизонтально прокрученным содержимым, полоса прокрутки вверху.

Это работает в FF / Chrome и частично работает в Safari.

Проблема в Safari полоса прокрутки присутствует и работает, но не видна. В jsfiddle в Safari вы можете нажимать и прокручивать верхнюю часть, даже если полоса прокрутки не отображается.

jsfiddle

.testOne {
    transform: rotateX(180deg);
    overflow-x: scroll;
    scrollbar-color: #ffde00 #f7f7f7;
}

.testOne::-webkit-scrollbar {
    height: 20px;
}

.testOne::-webkit-scrollbar-thumb {
    background-color: #ffde00;
}

.testTwo {
    transform: rotateX(180deg);
    width: 100%;
    display: flex;
    visibility: visible;
}

.item {
  padding-right: 10px;
  list-style: none;
}

<ul class="testContainer">
  <span class="testOne">
    <span class="testTwo">
      <li class="item">
        <img src='http://dummyimage.com/255x255/f0f0f0/000000' alt='' title=''/>
      </li>
      <li class="item">
        <img src='http://dummyimage.com/255x255/f0f0f0/000000' alt='' title=''/>
      </li>
      <li class="item">
        <img src='http://dummyimage.com/255x255/f0f0f0/000000' alt='' title=''/>
      </li>
    </span>
  </span>
</ul>

Надеясь, что кто-то столкнулся с этим и может посоветуйте способ показать полосу прокрутки.

Answer 1

Когда у вас есть преобразования на прямых дочерних элементах, это имеет проблему. Попробуйте переместить преобразование на один уровень вверх к элементу .testContainer.

.testContainer {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
  position: relative;
  overflow-x: hidden;
  transform: rotateX(180deg);
}

.testOne {
  overflow-x: scroll;
}

.testOne::-webkit-scrollbar {
  height: 20px;
}

.testOne::-webkit-scrollbar-thumb {
  background-color: #ffde00;
}

.testTwo {
  transform: rotateX(180deg);
  width: 100%;
  display: flex;
  visibility: visible;
}

.item {
  padding-right: 10px;
  list-style: none;
}

<ul class="testContainer">
  <span class="testOne">
    <span class="testTwo">
      <li class="item">
        <img src='http://dummyimage.com/255x255/f0f0f0/000000' alt='' title=''/>
      </li>
      <li class="item">
        <img src='http://dummyimage.com/255x255/f0f0f0/000000' alt='' title=''/>
      </li>
      <li class="item">
        <img src='http://dummyimage.com/255x255/f0f0f0/000000' alt='' title=''/>
      </li>
    </span>
  </span>
</ul>