I have successfully created a Bootstrap 4 modal with a full-screen images carousel experience. The images are set to always be fully visible, centered both vertically and horizontally, with max-height: 100%; and max-width: 100%;.
While this setup works flawlessly on Chrome and Firefox, it seems to encounter issues when viewed in Safari (Version 12.1.2 (14607.3.9) on macOS). For some reason, the images do not display properly and appear to have no size.
The images fail to load as expected on Safari and I'm currently unable to determine the cause of this issue.
.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>If you wish to view a working demonstration, please visit the following link: https://jsfiddle.net/upsidown/t9kwdeur/