Блог

Я создаю всплывающее окно, полностью используя CSS, но я изо всех сил пытаюсь реализовать его в Firefox, поскольку фоновые изображения сворачиваются, когда я устанавливаю display: table-cell . Я установил display: table; для полного всплывающего окна и разделил на две ячейки таблицы как левую и правую. Даже после указания высоты изображения все еще сворачиваются……. Вот полный код:

HTML:

 <div class="popup" id="popup">
            <div class="popup__content">
                <div class="popup__left">
                    <!-- <img src="img/nat-8.jpg" alt="Tour photo" class="popup__img">
                    <img src="img/nat-9.jpg" alt="Tour Photo" class="popup__img"> -->
                    <div class="popup__img-1">amp;nbsp;</div>
                    <div class="popup__img-2">amp;nbsp;</div>
                </div>
                <div class="popup__right">
                    <a href="#section-tours" class="popup__close">amp;times;</a>
                    <h2 class="heading-secondary u-margin-bottom-small">Start booking now</h2>
                    <h3 class="heading-tertiary u-margin-bottom-small">Important amp;ndash; Please read these terms before booking</h3>
                    <p class="popup__text">....</p>
                        
  
  

и я использую SASS в качестве препроцессора CSS, и вот мой код SASS:

 .popup {
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: rgba($color-black, 0.8);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;

    @supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) {
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      background-color: rgba($color-black, 0.3);
    }

    amp;__content {
       @include absCenter;  
       width: 75%;  
       height: 50rem;
       background-color: $color-white;
       box-shadow: 0 2rem 4rem rgba($color-black, 0.2);
       border-radius: 0.3rem;
       display: table;
       overflow: hidden;
       //overflow-y: scroll;
       opacity: 0;
       transform: translate(-50%, -50%) scale(0.25);
       transition: all 0.5s 0.2s;
       
       @include respond(phone) {
          width: 85%;
          height: 25rem;
       }
    }   

    amp;__left {
       width: 33.333333%;
       //float: left;
       display: table-cell;
       vertical-align: middle;

       @include respond(phone) {
         width: 0;
         display: none;
         backface-visibility: hidden;
       }
    }

    amp;__right {
       width: 66.666667%;
       //float: left;
       display: table-cell;
       vertical-align: middle;
       padding: 3rem 5rem;

       @include respond(phone) {
         width: 100%;
         padding: 3rem 3rem;
         // overflow-y: scroll;
       }
    }

    amp;__img-1 { 
       background-image: url(../img/nat-8.jpg);
       background-size: cover;
       background-position: center;
       display: inline-block;
       width: 100%;
       //height: 100%;
       height: 50%;
       //position: fixed;

       @include respond(tab-land) { //<=1200
         background-image: url(../img/nat-8-small.jpg);

         @media (min-resolution: 192dpi) and (min-width: 56.25em) {
            background-image: url(../img/nat-8.jpg);
          }
        }
    }   

    amp;__img-2 {
       background-image: url(../img/nat-9.jpg);
       background-size: cover;
       background-position: center;
       display: inline-block;
       width: 100%;
       height: 50%;


       @include respond(tab-land) { //<=1200
         background-image: url(../img/nat-9-small.jpg);

         @media (min-resolution: 192dpi) and (min-width: 56.25em) {
            background-image: url(../img/nat-9.jpg);
          }
        }
    }
  

После быстрого просмотра я обнаружил, что класс popup__left height не наследуется, поэтому я установил его тоже на 100%, и это решило проблему.