Класс CSS не отображается в браузерах iOS, но работает в Android

Question

Я пишу веб-страницу с окном чата в стиле Facebook. Он отлично работает в браузере и CSS выглядит следующим образом:

.chatWindowContainer {
    display: flex;
    flex-flow: column;
    position: absolute;
    bottom: 0px;
    right: 15%;
    margin-left: 10px;
    background-color: white;
    width: 350px;
    box-shadow: 0 20px 20px 5px rgba(0, 0, 0, 0.2),
        0 0px 10px 0 rgba(0, 0, 0, 0.19);
}

Для мобильных устройств я хочу, чтобы окно охватывало всю нижнюю часть экрана. Я использую медиа-запрос:

@media screen and (max-width: 800px) {
    .chatWindowContainer {
        width: 100%;
        right: 0%;
    }
}

При использовании devtools в Chrome и в окне просмотра устройства все также выглядит хорошо. Это также работает в Chrome для Android, но не работает в Safari, Edge или Chrome для iOS, я не могу понять, почему. Могу ли я в любом случае проверить, получаю ли я сообщения об ошибках или подобное?

Answer 1

Я разобрался ...

Я использую пакет реагирования "реакция-распознавание речи", который использует API веб-речи.Это НЕ поддерживается ни в чем, кроме Chrome и Chrome для Android.При удалении SpeechAPI-оболочки вокруг моего WebApp в iOS появляется окно ChatWindow.

Так что это не проблема с CSS, а скорее JS.