Стиль CSS не распространяется на iPhone (как Chrome, так и Safari)

Question

Я пытаюсь создать меню поиска слайдера вне холста. Я использую Angular 8, Angular Материалы и Bootstrap 4. Код HTML:

    <div [ngClass]="{'slide': !showSearch, 'slide-in': showSearch}" class="wrapper">
         <div>inner forms and buttons </div>
    </div>

CSS Код:

.wrapper {
    height: 100%;
    background-color: #343a40;
    width: 30%;
    position: fixed;
    top: 0;
    color: white!important;
}
.slide {
    position: fixed;
    top: 0;
    height: 100%;
    right: -105%;
    transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    /* width: 100%; */
    z-index: 10000;
}
.slide-in {
    position: fixed;
    top: 0;
    right: 0;
    transition: all 0.8s ease-in;
    -webkit-transition: all 0.8s ease-in;
    box-shadow: -5px 5px 10px 2px black;
    z-index: 10000;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}

Идея состоит в том, чтобы скрыть меню справа (-105%) и одним нажатием кнопки сдвинуть его справа. Он отлично работает на моем ноутбуке с использованием Chrome, в ноутбуке, мобильном телефоне, iPad и т.д. c .... Режим прекрасно работает на устройстве Android. Он не работает на устройстве iPhone, используя Chrome или Safari. Приложены некоторые скриншоты на моем ноутбуке с использованием DevTools и как это показано на моем iPhone.

Похоже, что либо позиция: фиксированная или z-index не работает, но я не могу понять, что не так.

Благодарим Вас за помощь, Янив