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

Поиск решения для сафари iOS ТОЛЬКО

При использовании -webkit-overflow-scrolling: touch он разбивает 3D-перспективу на iOS.

См. Демо на CodePen .

HTML

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

CSS

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

введите описание изображения здесьвведите описание изображения здесь

Есть ли обходной путь?

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

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

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

     {perspective:300px;} 

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

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


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

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

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

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

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

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

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

    Общий фрагмент не работает и с 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);} 

    Кодепен: http://codepen.io/anon/pen/LxZZdX

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

     .outer {`enter code here` overflow: scroll; -webkit-overflow-scrolling: touch; /* More properties for a fixed height ... */ } .inner { height: calc(100% + 1px); } 

    Пожалуйста, проверьте это демо: 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> 
    Interesting Posts

    Как записывать видео из работающего приложения iOS для рекламного использования?

    Firebase iOS несколько ошибок при загрузке файлов символов

    Нужно объяснение в @ property / @ синтезироваться в iOS

    UIButton – Сохранять текст при прикосновении

    Как использовать GCD для легкой транзакционной блокировки ресурсов?

    NSUserDefaults vs NSCoding

    Именование блоков в объективе-c?

    MPMusicPlayerController знает предыдущую и следующую песню

    есть способ генерации, создания или экспорта .ppt-представления на iOS с использованием библиотеки C или C ++

    Будет ли iOS пробуждать мое приложение, когда я получаю молчание push-уведомления? (Когда приложение не работает)

    Прокрутка UIAlertController / UIAlertView на iOS 8

    Могу ли я использовать старый сервис TestFlight для тестирования версий моего приложения для iOS?

    Добавление Firebase к настраиваемой инфраструктуре в iOS не работает

    Swift 3.0 AVAudioPlayer Воспроизведение аудио по музыке

    Этот код не показывает таблицы, почему?

    Давайте будем гением компьютера.