Контейнер отключается при использовании flex для диалога в Inte rnet Explorer 11 - PullRequest
Новая
       27

Контейнер отключается при использовании flex для диалога в Inte rnet Explorer 11

0 голосов
/ 11 апреля 2020

Я пытаюсь создать кросс-браузерную систему диалоговых окон. По сути, вы нажимаете на ссылку, и диалоговое окно появляется вниз. Удивительно, но я заставил его работать во всех основных браузерах, включая IE 11. Единственная проблема заключается в том, что если содержимое внутри диалогового окна превышает окно, поле обрезается в IE 11. Вот код: 

/* Core styles */
html,
body {
    position: absolute;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
}
.page {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.content-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: auto;
}
.card {
    position: relative;
    box-sizing: border-box;
    margin: 3rem;
    padding: 3rem;
    color: rgba(0, 0, 0, 0.8);
    background-color: #ffffff;
    border-radius: 0.4rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* Dialog styles */
.dialog-outer {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    -webkit-transition: all .4s cubic-bezier(.25, .8, .25, 1);
    transition: all .4s cubic-bezier(.25, .8, .25, 1);
    z-index: 99;
    outline: none;
}
.dialog-outer .dialog-inner {
    height: 100%;
    overflow: auto;
}
.dialog-outer .dialog-inner .dialog-content {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.dialog-outer .dialog-inner .dialog-content .card {
    margin: auto;
}
.dialog-outer:target {
    top: 0;
}
.dialog-outer:target ~ .page .content-wrapper {
    overflow: hidden;
}
.dialog-outer:target .dialog-content {
    top: 0;
}
<!-- Dialog 1 -->
<div class="dialog-outer" id="dialog-1">
  <div class="dialog-inner">
    <div class="dialog-content">
      <div class="card" style="width: 400px;">
        <strong>Dialog 1</strong>
        <br /><br />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <a href="#">Close</a>
      </div>
    </div>
  </div>
</div>

<!-- Dialog 2 -->
<div class="dialog-outer" id="dialog-2">
  <div class="dialog-inner">
    <div class="dialog-content">
      <div class="card" style="width: 400px;">
        <strong>Dialog 2 (long scrolling content)</strong>
        <br /><br />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <a href="#">Close</a>
      </div>
    </div>
  </div>
</div>

<!-- Page -->
<div class="page">
  <div class="content-wrapper">
    <div style="padding: 20px;">
      <!-- Toggles -->
      <a href="#dialog-1">Toggle dialog 1</a>
      <br /><br />
      <a href="#dialog-2">Toggle dialog 2</a>
    </div>
  </div>
</div>

Огромные куски кода в основном генерируют 2 диалоговых окна. Один, где контент крошечный, поэтому он не превышает длину страницы, другой требует прокрутки. К сожалению, второе диалоговое окно отключено в IE 11. Оно работает во всех других браузерах, на которых я тестировал, включая некоторые старые версии Edge и Firefox. Что именно является проблемой в IE 11?

Идеальным ответом будет тот, который не требует изменений в разметке HTML и основных стилях.

Вы можете скачать вышеуказанный код в виде HTML файла здесь: https://anonfile.com/933cv8o0o0/dialog_html

Спасибо за любую помощь!

1 Ответ

1 голос
/ 13 апреля 2020

Я думаю, что проблема с flexbox. В flex-значении совместимости браузера указано:

IE неправильно размещает содержимое встроенного блока внутри flex-контейнеров.

Проблема может будет исправлено, если вы удалите display: flex; в #dialog-2. Вы можете изменить следующие стили css следующим образом: 

.dialog-outer .dialog-inner .dialog-content {
    position: absolute;
    box-sizing: border-box;
    /*display: flex;*/
    flex-direction: column;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;                    
 }

 #dialog-1 .dialog-inner .dialog-content {
    display: flex;
 }
...