Странное поведение CSS Z-Index в браузерах iOS ⇐ IOS

[Anonymous]

Проблема < /h2>
Я пытаюсь воспроизвести поведение нативных приложений iOS, где остается представление о поиске (слияет с верхней панелью) после того, как пользователь прокрутил. Заголовок фиксирован, и только основной контент закручивается. В поле поиска есть позиция: Sticky , и я дал ему высокий Z-индекс. Это прекрасно работает на рабочем столе Chrome/Safari, но терпит неудачу в браузерах iOS. См. Поведение в действии ниже (упрощенная версия моей текущей реализации)
прокрутка на рабочем столе - работает нормально
p> p> p> p> p> p> p> p> p> p> p> p> p> p> p> p> p> p> https://i.sstatic.net.net.net/jhfg5q2c.gif "/https://i.sstatic. /> Прокрутка на iOS - не работает

what imatd

Translate3d Hack < /li>
< /ol>

Код: Выделить всё

 transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);

• Использование псевдоэлемента на заголовке с фоном/фильтром, применяемым к нему

-без видимого изменения, и никто из этого не заставляет его работать на ios. Выпуск) < /h2>

Код: Выделить всё

body {
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
}

header {
padding: 0 20px;
height: 60px;
position: relative;
top: 0;
width: 100%;
z-index: 50;
color: black;
font-size: 24px;
font-weight: bold;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
}

/* Doesn't work on iOS neither */
/* header:before {
content: "";
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
width: 100%;
height: 100%;
position: absolute;
top:0;
left:0;
z-index:-1;
} */

main {
height: 100%;
}

.ios-scroll-view {
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-top: calc(44px + env(safe-area-inset-top, 0px));
padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px));
background: lightgreen;
padding-left: 16px;
}

#search {
width: 20%;
position: sticky;
top: -10px;
z-index: 999 !important;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}< /code>




Title



Title

Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
Content here...
LAST

Подробнее здесь: https://stackoverflow.com/questions/795 ... s-browsers