Вложенные в Safari проблемы z-index - PullRequest
Новая
       32

Вложенные в Safari проблемы z-index

0 голосов
/ 12 марта 2019

У меня возникли проблемы с сафари и отображением всплывающего окна над элементом навигации. По какой-то причине данный z-индекс игнорируется, а всплывающее окно скрывается за навигацией.

Вот соответствующий HTML-код: 

<section class="application">
<header class="application-header"></header>
<nav class="application-navigation"></nav>
<div class="application-content">
  <div class="wizard-background">
    <div class="wizard-content">TEST TEST TEST TEST</div>
  </div>
</div>

А вот код меньше 

.application {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;

    &-navigation {
        position: absolute;
        background: green;
        left: 0;
        width: 200px;
        bottom: 0;
        top: 50px;
    }

    &-header {
        position: absolute;
        background: red;
        top: 0;
        left: 0;
        right: 0;
        height: 50px;
    }

    &-content {
        position: absolute;
        z-index: 81;
        left: 200px;
        top: 50px;
        bottom: 0;
        right: 0;
        background: yellow;
        overflow-y: auto;
    }
}
.wizard {

     &-background {
         z-index: 100;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         position: fixed;
         background: rgba(0, 0, 0, 0.1);
      }

      &-content {
          position: fixed;
          top: 100px;
          left: 150px;
          width: 200px;
          height: 200px;
          background: white;
          z-index: 101;
      }
}

Когда вы просматриваете этот код в Safari, вы можете видеть, что «содержимое мастера» частично скрыто за «содержимым навигации». Если вы удалите z-index из «application-content», он будет работать нормально.

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

Может кто-нибудь объяснить, что я делаю не так? Или как сафари отличается от всех других браузеров в отношении z-index.

...