Bootstrap 4 全屏模式与 Safari 中的轮播问题答案

【问题标题】：Bootstrap 4 full-screen modal with carousel issues in SafariBootstrap 4 全屏模式与 Safari 中的轮播问题
【发布时间】：2019-08-23 22:06:50
【问题描述】：

这是我尝试使用全屏图像轮播创建全屏 Bootstrap 4 模式。

图像具有max-height: 100%; 和max-width: 100%;，因此它们始终是完全可见的，并且它们垂直和水平居中。

它适用于 Chrome 和 Firefox，但由于某种原因，它不适用于 Safari（mac os 上的版本 12.1.2 (14607.3.9)）。

图像在 Safari 上不显示并且似乎没有大小。我不知道为什么...

.modal-full {
  width: 100vw;
  height: 100vh;
}
.modal-full .modal-dialog {
  margin: 0;
  height: 100%;
}
.modal-full .modal-content {
  width: 100vw;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
}
.modal-full .modal-content .modal-body {
  padding: 0;
}
.modal-full .modal-content .carousel {
  height: 100%;
}
.modal-full .modal-content .carousel-actions {
  height: 100px;
  width: 100%;
  position: relative;
}
.modal-full .modal-content .carousel-inner {
  height: 100%;
}
.modal-full .modal-content .carousel-inner > .carousel-item {
  height: 100%;
  top: 0;
}
.modal-full .modal-content .carousel-inner > .carousel-item > img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-height: 100%;
  max-width: 100%;
  display: block;
  margin: 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<a href="#" class="gallery-to-carousel btn btn-primary" data-toggle="modal" data-target="#portfolioModal">
  Open modal
</a>

<!-- Modal -->
<div class="modal modal-full fade" id="portfolioModal" tabindex="-1" role="dialog" aria-labelledby="portfolioModalLabel" aria-hidden="true">

  <div class="modal-dialog" role="document">

    <div class="modal-content">

      <div class="modal-body">

        <div id="portfolioCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
        
          <div class="carousel-inner">

              <div class="carousel-item active">
                <img src="https://via.placeholder.com/1200x800">
              </div>
              <div class="carousel-item">
                <img src="https://via.placeholder.com/800x600">
              </div>
              <div class="carousel-item">
                <img src="https://via.placeholder.com/400x800">
              </div>
              <div class="carousel-item">
                <img src="https://via.placeholder.com/2000x400">
              </div>
              
          </div>

          <a class="carousel-control-prev" href="#portfolioCarousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#portfolioCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>

        </div>
      </div>

    </div>
  </div>
</div>

工作 JSFiddle：https://jsfiddle.net/upsidown/t9kwdeur/

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4 safari

【解决方案1】：

将.carousel 从100% 更改为height: 100vh; 似乎可以在Safari 中使用

.modal-full .modal-content .carousel {
  height: 100vh;
}

Updated fiddle

或者您可以将height: 100%; 添加到.carousel 的父级 - .modal-body。

.modal-full .modal-content .modal-body {
  padding: 0;
  height: 100%;
}

Updated fiddle 2

【讨论】：