After integrating a Bootstrap 4 carousel onto a Drupal platform, I encountered a peculiar issue. The carousel functions smoothly on Chrome, but on Safari, it briefly blinks before transitioning to the next slide (as per the set interval time). Initially, I suspected the B4 crossfade class to be the culprit and removed it, but the blinking problem persists. Unfortunately, I cannot provide a video demonstration at the moment, so a written description will have to suffice. Below, I've included snippets of the HTML, CSS, and JS. Is there a known solution to resolve this glitch?
Thank you in advance!
Jemma
<!--bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--Boostrap JS-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption p {
z-index: 10;
bottom: 3rem;
color: black;
}
/* Declare heights because of positioning of img element */
.carousel-item {
height: 16rem;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
height: 100px;
width: 100px;
outline: black;
background-image: none;
}
.carousel-control-next-icon:after
{
content: '\25b6';
font-size: 55px;
color: black;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.carousel-control-prev-icon:after {
content: '\25C0';
font-size: 55px;
color: black;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
/* Changes the color of the indicators */
#myCarousel .carousel-indicators li
{
background: #808080;
}
#myCarousel .carousel-indicators .active
{
background: #333333;
}
.carousel-indicators
{
margin-bottom: -20px;
}
.title{
font-size: 25px;
font-style: italic;
}
</style>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="container">
<div class="carousel-caption d-none d-md-block">
<p class="title">Title</p>
<p>Thursday, November 29, 2018</p>
<a href=" " target="__blank"><button class="btnCarousel">Learn More</button></a>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="carousel-caption d-none d-md-block">
<p class="title">Title</p>
<p>Thursday, November 29, 2018 - 11:00am to 1:30pm</p>
<a href=" " target="__blank"><button class="btnCarousel">Learn More</button></a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script>
// When the DOM is ready, run this function
$(document).ready(function() {
//Set the carousel options
$('#myCarousel').carousel({
pauseOnHover: true,
interval: 5000
});
});
</script>