IOS не соблюдает z-index с -webkit-overflow-scrolling

Проблема:

В iOS z-index прокручиваемой области игнорируется при использовании -webkit-overflow-scrolling. Если два объекта с -webkit-overflow-scrolling перекрываются, нижний прокручивается вместо отображаемого выше.

Как воспроизвести:

Создайте два элемента, накладывающихся друг на друга (например, с position: absolute), один из которых имеет более высокий z-index и добавляет

.selector
{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

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

Дополнительно добавьте

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black">

на ваш <head>. Затем добавьте страницу на главный экран и запустите ее оттуда.

Если вы затем попытаетесь прокрутить верхний элемент, вместо этого прокрутите элемент ниже.

MCVE:

В качестве альтернативы просто выберите это перо. Запустите версию full с вашего устройства iOS, добавьте ее на главный экран и запустите оттуда.

Окружающая среда:

Протестировано на iPhone 5 и iPhone 6 с iOS 9.1 и iOS 9.3.2

Замечания:

  • Проблема возникает только при запуске страницы/приложения из главного экрана (прикрепленного приложения) или внутри веб-обозревателя Xamarin (возможно, что-то связано с UIWebView и WKWebView).
  • После изменения ориентации устройства (портрет/пейзаж) после загрузки страницы проблема будет устранена до тех пор, пока страница не будет перезагружена (может быть, исправлена ​​перезагрузка)?
  • Изменение нижних элементов overflow-y до hidden через JS устраняет проблему, однако переключение overflow вызывает перерисовку, вызывающую проблемы с производительностью.
  • Удаление height: 100%; width: 100% из html, body также устраняет проблему, однако необходимо установить, чтобы процентные значения работали правильно

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

ОТВЕТЫ

Ответ 1

По существу, то, что вы испытываете, - ошибка iOS с -webkit-overflow-scrolling: touch;. Чтобы решить эту ошибку, в соответствии с этим ответом, просто добавьте следующие стили CSS к прокручиваемому div:

-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;

Итак, в целом, если вы добавите указанные стили в стили для класса scrollable в свой CSS, он должен работать. Протестировано на iPhone 5 с iOS 9. Обратите внимание, что если вы прокрутите вниз или вверху прокручиваемого раздела, который находится выше всего остального, он начнет прокручивать тело.

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

Ответ 3

Очень простое исправление для этого было бы переключить класс на тело при прокрутке и настроить ваши прокручиваемые окна. Если вы прокручиваете .scrollA, то переключите класс scrollB на тело и примените что-то вроде этого Javascript/css, или вы можете сделать все это с помощью javascript, ваш выбор.

Javascript

$('#targetDivA').on('scroll touch', function(){
   $('body').toggleClass('scrollB);

   //or use this to navigate to it
   //$(this).siblings().toggleClass(\'scrollB\')
})

CSS

body.scrollB .targetDivB {
    pointer-events: none;
    /*this eliminates the device from using any event until removed*/
}

Надеюсь, это поможет вам спать!

Ответ 4

Удалите это свойство динамически, когда есть необходимость. Он менее сложен и не вызывает побочных эффектов.