IOS Safari не уважая Z-индекс

Question

Я даже не знаю, как объяснить это словами, так вот изображение с аннотациями:

Слева IOS Simulator, справа есть Сафари. Существует материальный пользовательский интерфейс AppBar с более низким индексом z. Это структура:

Я полностью тупик. В каждом браузере это работает отлично.

Codepen здесь, то есть тот же вопрос: http://codepen.io/ffxsam/pen/NxwZQv

Не проводка всего кода здесь, так как есть тонна Lorem Ipsum. Но StackOverflow требует чего-то, так вот CSS:

body { 
    margin: 0; 
} 

.app-bar { 
    color: #fff; 
    min-height: 64px; 
    background: #999; 
    position: relative; 
} 

.big { 
    font-size: 2em; 
} 

.viewport { 
    padding: 1em; 
    font-size: 18px; 
    position: absolute; 
    border: 2px solid blue; 
    top: 64px; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch; 
} 

.overlay { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    background: #fff; 
    padding: 1em; 
    z-index: 9000; 
} 

Похоже, если наложение ДИВ является дочерним контента, который вы хотите наложить, все г-индекс в мире не заставит его работать. Это должно быть вне всего остального в иерархии DOM. Хотя в React это может быть сложно, потому что вы хотите, чтобы наложение получило доступ к определенным реквизитам, а перемещение его из контейнера имеет последствия для передачи данных.

Answer 1

Пожалуйста, обратите внимание, что я

1. сменил порядок <div class="overlay"> и <div class="viewport"> в HTML

2. Altered устанавливаемыми сотовыми из .overlay

HTML

<div> 
    <div class="app-bar"> 
    <span class="big">Hello.</span> 
    <button class="open-overlay"> 
     Open Overlay 
    </button> 
    </div> 

    <div class="overlay"> 
     <button class="close-overlay"> 
     Close this. 
     </button> 
     <p>00000</p> 
     <p>11111</p> 
     <p>22222</p> 
     <p>33333</p> 
     <p>44444</p> 
     <p>55555</p> 
     <button class="close-overlay"> 
     Close this. 
     </button> 
    </div> 

    <div class="viewport"> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est corporis cum iure id voluptatibus inventore recusandae veniam dolorum harum, minus officia blanditiis asperiores illum laudantium tenetur doloremque hic ea atque! 
    </p> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis illo eligendi magnam laudantium tenetur in consequatur aperiam totam beatae, accusamus sed, distinctio cum quam. Unde dolores ut consectetur temporibus similique. 
    </p> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est corporis cum iure id voluptatibus inventore recusandae veniam dolorum harum, minus officia blanditiis asperiores illum laudantium tenetur doloremque hic ea atque! 
    </p> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis illo eligendi magnam laudantium tenetur in consequatur aperiam totam beatae, accusamus sed, distinctio cum quam. Unde dolores ut consectetur temporibus similique. 
    </p> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est corporis cum iure id voluptatibus inventore recusandae veniam dolorum harum, minus officia blanditiis asperiores illum laudantium tenetur doloremque hic ea atque! 
    </p> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis illo eligendi magnam laudantium tenetur in consequatur aperiam totam beatae, accusamus sed, distinctio cum quam. Unde dolores ut consectetur temporibus similique. 
    </p> 
    </div> 
</div> 

CSS

body { 
    margin: 0; 
} 

.app-bar { 
    color: #fff; 
    min-height: 64px; 
    background: #999; 
    position: relative; 
} 

.big { 
    font-size: 2em; 
} 

.viewport { 
    padding: 1em; 
    font-size: 18px; 
    position: absolute; 
    border: 2px solid blue; 
    top: 64px; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch; 
} 

.overlay { 
    position:relative; 
    display: none; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    height:calc(100vh - 64px); /* viewport height minus .app-bar height */ 
    background: #fff; 
    padding: 1em; 
    z-index: 9000; 
} 

JS

$('.open-overlay').on('click', function() { 
    $('.overlay').fadeIn(); 
}); 

$('.close-overlay').on('click', function() { 
    $('.overlay').fadeOut(); 
}); 

http://codepen.io/anon/pen/BjJZKB