css модальный фон не заполняет высоту, когда адресная строка падает на мобильном телефоне - PullRequest
0 голосов
/ 25 марта 2020

React Frontend Material-ui background Chrome Браузер

На мобильных устройствах, для PWA заголовок сворачивается при прокрутке вниз; когда это происходит, фон оставляет зазор в нижней части экрана высотой адресной строки.

Что можно сделать, чтобы установить фон для заполнения пробела?

Спасибо! (Игнорировать глупые фиктивные данные :-D)

    <Backdrop
        className={modalBemify("modal_backdrop")}
        open={open}
        onClick={closeCallback}
        style={{ zIndex: 1, color: "#fff" }}
    >
        <div
            className={modalBemify("modal")}
            open={open}
        >
            <Fade in={open}>
                <DefaultMargin modifier="modal"> 
                    <div className={modalBemify("modal_paper")}>
                        {props.children}
                    </div>
                </DefaultMargin>
            </Fade>
        </div>
    </Backdrop>

Modal closed, with address bar Modal open w/ address bar Modal open w/out address bar

Вы можете видеть, что 3-е изображение имеет разрыв на прозрачном фоне, когда адресная строка разрушается.

1 Ответ

0 голосов
/ 25 марта 2020

Я удалил фон из компонента material-ui Backdrop (background-color: unset !important;) и добавил его в класс .modal (background-color: rgba(255, 255, 255, 95%);)

...