Модал не рендерится правильно в IE - PullRequest
Новая
       27

Модал не рендерится правильно в IE

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

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

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

Это работает, как и ожидалось, в других браузерах ,

Вот модальный контейнер css

position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
overflow: auto;
background-color: rgba(0,0,0,.7);
cursor: pointer;
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;

И сам модал 

background-color: ${colors.white};
display: inline-block;
margin-top: 50px;
text-align: left;
cursor: initial;

Любые идеи, которые могут иметь место при рендеринге IE

1 Ответ

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

Я нашел способ разобраться с этим. Внутри этого модального я на самом деле рендеринг другого div (который имеет различный состав текста и действий на разных страницах), который наследует это css: 

background-color: ${colors.white};
display: inline-block;
margin-top: 50px;
text-align: left;
cursor: initial;

Но, очевидно, когда вы прокручиваете вниз и при загрузке нового контента стиль не применяется. После добавления еще раз background-color: ${colors.white}; к элементу div, отображаемому внутри модала, все выглядит хорошо.

...