Наложение с `position: fixed 'застряло позадина мобильном сафари `платформа = ios`

Question

Я пытаюсь показать оверлей с style={position:fixed,height:100%}, который покрывает весь экран.Вот блик стека, который показывает, что он работает как задумано:

https://stackblitz.com/edit/angular-ionic4-test-posfixed

Однако, когда я развертываю на xcode/ios/mobile-safari, оверлей застрял позади <ion-header>.Я не могу настроить CSS z-index, чтобы он работал.

вот ионный проект с теми же компонентами, готовыми для запуска в xcode

https://github.com/mixuala/posfixed.git

cd ./posfixed
npm install
ionic serve &
ionic cordova run ios -l

Answer 1

Мне потребовалось некоторое время, чтобы понять это, но ответ был прост.position:fixed создает другой контекст стека.В конечном итоге, то, что сработало, это добавило position:fixed ко всем неправильно наложенным элементам в соответствующее время.

.show-overlay {
    ion-menu {  
      position:fixed;
    }
    ion-header {
      position:fixed;
    }
    .overlay {
      // now on top of ion-header when platform=ios
      position:fixed;
    }
}