Safari обрезает нижний фон во всплывающем окне с прокруткой div - PullRequest
Новая
       23

Safari обрезает нижний фон во всплывающем окне с прокруткой div

0 голосов
/ 05 мая 2020

На изображении ниже показано всплывающее окно, содержащее 3 раздела. Верх, прокрутка содержимого и низ.

Проблема: Safari каким-то образом слишком быстро обрезает дно .

Этот Stackblitz также его копирует.

Пока что я выяснили, что это может иметь какое-то отношение к размеру области прокрутки. Если я удалю часть текста, проблема исчезнет.

К сожалению, в настоящий момент у меня нет доступа к Ma c, и поэтому я не могу «проверить» браузер в инструментах разработчика. Так что я надеюсь, что кто-то сможет пролить свет на это ...

Chrome vs Safari regarding popup overlay

1 Ответ

0 голосов
/ 06 мая 2020

Мне удалось получить доступ к Ma c, и проблема оказалась довольно тривиальной и должна иметь какое-то отношение к интерпретации Safaris слова flex.

Мне пришлось обернуть родительский блок кнопки «row» в другой div:

До: 

<ngx-smart-modal #termsModal1 [identifier]="'termsModal1'" customClass="nsm-centered">
  <div class="main-container">
    <div class="nsm-body content-wrapper mt-5">
      <div class="overflow-container">
        <div class="pl-3 pr-3">
          <h3>Terms and conditions</h3>
          <ed-terms></ed-terms>
        </div>
      </div>
      <div class="clearfix"></div>
      <!-- RELEVANT PART -->
      <div class="row m-0 pb-4 pl-3 pr-3 clearfix">
        <div class="btn btn-primary btn-block col-12 mt-3" (click)="termsModal1.close()">I ACCEPT THE TERMS</div>
        <div class="btn btn-info btn-block col-12" (click)="termsModal1.close()" i18n>CLOSE</div>
      </div>
    <!-- /RELEVANT PART -->
    </div>
  </div>
</ngx-smart-modal>

После:

Я также удалил все вещи 'clearfix', которые я добавил в разочаровании; -) 

<ngx-smart-modal #termsModal2 [identifier]="'termsModal2'" customClass="nsm-centered">
  <div class="main-container">
    <div class="nsm-body content-wrapper mt-5">
      <div class="overflow-container">
        <div class="pl-3 pr-3">
          <h3>Terms and conditions</h3>
          <ed-terms></ed-terms>
        </div>
      </div>
      <!-- RELEVANT PART -->
      <div>
        <div class="row m-0 pb-4 pl-3 pr-3">
          <div class="btn btn-primary btn-block col-12 mt-3" (click)="termsModal2.close()">I ACCEPT THE TERMS</div>
          <div class="btn btn-info btn-block col-12" (click)="termsModal2.close()" i18n>CLOSE</div>
        </div>
      </div>
      <!-- /RELEVANT PART -->
    </div>
  </div>
</ngx-smart-modal>

Код stackblitz был обновлен соответствующим образом чтобы отразить оба случая.

...