it-roy-ru.com

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 также устраняет проблему, однако для правильной работы процентных значений их необходимо установить

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

19
Aides

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

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

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

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

7
Isaac Adni

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

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

1
Đông An

Очень простым решением для этого будет переключение класса на тело при прокрутке и нацеливание на прокручиваемые окна. Если вы прокручиваете .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*/
}

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

0
Caleb Swank