Исправлена ​​ошибка, при которой заголовок прыгает и мигает при прокрутке с помощью iPhone / iOS - PullRequest
Новая
       57

Исправлена ​​ошибка, при которой заголовок прыгает и мигает при прокрутке с помощью iPhone / iOS

0 голосов
/ 12 апреля 2019

Я пытался исправить ошибку, связанную с прокруткой в ​​iOS. Эффект прокрутки применяется ко всему экрану, а сверху есть фиксированный заголовок.

Проблема в том, что фиксированный заголовок прыгает и мигает при прокрутке. Эта проблема видна только с iPhone / iOS. (Я тестировал его на iPhone8, iOS12.2), и он отлично работает с Android-устройством и рабочим столом.

Я уже пробовал несколько обходных путей, таких как добавление -webkit-overflow-scrolling: touch; и -webkit-transform: translate3d(0,0,0); к фиксированному элементу. Я ссылался на похожие проблемы, обнаруженные в Stackoverflow. [1] [2]

CSS похож на следующее. 

.sidebar-mobile-transition {
    width: 100%;
    z-index: 0;
    background-color: white;
    position: fixed;
    bottom: 0;
    overscroll-behavior: none;
    overflow-y: scroll;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sidebar-mobile-header {
    top: 0;
    position: fixed;
    height: 50px;
    width: 100%;
    background: black;
    color: white;
    z-index: 10;
    -webkit-transform: translate3d(0,0,0);
}

Есть ли способ исправить эту проблему?

1 Ответ

0 голосов
/ 26 апреля 2019

Наличие фиксированного заголовка и прокручиваемого содержимого не работает при прокрутке iOS.Я обнаружил, что мы должны использовать position: absolute вместо position: fixed.Также нам нужно добавить -webkit-overflow-scrolling: touch; для содержимого боковой панели.

Это выглядит примерно так: 

.sidebar-mobile-header {
            top: 0;
            position: absolute;
            height: 50px;
            width: 100%;
            }

.sidebar-mobile-content {
            position: relative;
            overflow-y: scroll;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            height: 100%;
           }
...