"-webkit-overflow-scrolling: touch" разбивает css 3d-перспективу

Ответ 1

Обновление, 29 мая

Doh! Я так глуп. Ниже, в то время как истина... ish не решает вопрос достаточно хорошо.

Если вы хотите, чтобы конфигурация вращения оставалась такой же, как вы показали, добавьте div между .scroll и .el и создайте его таким образом:

{perspective:300px;}

Таким образом, кажется, что вы хотите, чтобы div .pers переключился с помощью .scroll или добавил еще один после .scroll с той же перспективой.

Кроме того, попробуйте переместить perspective: 300px; на .scroll. Угол, по-видимому, изменяется как один прокрутка вверх или вниз.

Оригинальный ответ

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

Проблема overflow-y:scroll ломает свойство стиля преобразования в соответствии с spec. Переполнение-y влияет на вложенный элемент. Если ваша проблема не исчезнет, ​​вам также может понадобиться использовать объявление -WebKit-transform-style: preserve-3d на .scroll, хотя я думаю, что в этом случае у iOS уже установлен контекст стекирования (для Firefox это требуется, Webkit, похоже, не подходит).

Одним из решений является удаление вашего overflow:hidden из body и overflow-y:scroll из .scroll, но я подозреваю, что вы захотите, чтобы это было как небольшая часть страницы/экрана и перемещало блоки изображения внутри он.

Если это так, вам нужно подделать это с помощью преобразований и некоторого умного хакера и использовать прозрачность, чтобы быть частью этого усилия, обратите внимание, что это тоже (как в спецификации выше, прямо под стилем преобразования) вызывает эффект уплощения, когда он не применяется к окончательному node. Скажем, у вас была непрозрачность, отличная от 1 на .el, вы здесь отлично, а .el является окончательным node, но если opacity была применена к .scroll, то такое же сглаживание .el происходит, как при переполнении.

Не нужно тестировать на iOS, поскольку мне не хватает доступа к устройству.

Примечание. Установка значения переполнения, отличного от видимого для тела, не вызывает этой проблемы для большинства настольных браузеров, поддерживающих 3D-преобразования. Я не знаю о iOS/mobile.

Ответ 2

Общий фрагмент не работает и с Mozilla Firefox. Ниже приведено решение для iOS Safari/Chrome (iPhone-6S), Windows Mozilla/Chrome:

не нужно использовать -webkit-overflow-scrolling. Может быть возможная ошибка для этой функции, поскольку она находится в разработке [Ссылка Ссылка]. Удаление этого свойства создает желаемое поведение. Это может быть не точное решение, но оно может действовать как обходной путь.

.scroll {perspective:300px;overflow-y:scroll;height:100vh;}
.el {-webkit-transform:rotateX(80deg);transform:rotateX(80deg);}

Codepen: http://codepen.io/anon/pen/LxZZdX

Ответ 3

Этот фрагмент из ЗДЕСЬ может это сделать. У них, похоже, была и эта проблема.

.outer {`enter code here`
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  /* More properties for a fixed height ... */
}

.inner {
  height: calc(100% + 1px);
}

Ответ 4

Пожалуйста, проверьте это демо: http://codepen.io/tushar-chauhan/pen/yNgzem

Вы можете попробовать настроить значения, чтобы получить желаемые результаты. Это работает как на мобильном, так и на рабочем столе Safari. Я также размещаю HTML и CSS:

CSS и HTML ниже:

body{
  width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
.pers{
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 300px;
  height: 120vh;
  margin: 0 auto; overflow-y: auto;
}
.scroll {
  height: inherit;
  -webkit-overflow-scrolling:touch;
}
.el {
  width: 10em; height: 10em; background: url(http://placehold.it/200x200);background-size:cover;
  margin: 80vh auto;
  -webkit-transform-origin: 50% 35%;
  -webkit-transform: rotateX(80deg);
  transform: rotateX(80deg);
}

<div class="pers">
  <div class="scroll">
    <div class="el">
    </div>
  </div>
</div>