Bootstrap 4 Carousel is blinking during transitions on safari browser

问题

I implemented a bootstrap 4 carousel as a feature on a drupal platform. This carousel is working perfectly fine on chrome but on safari, the carousel would do the transition to the next slide but would blink once and then continue to the next slide (there's a set interval time). Originally I thought it had something to do with the B4 crossfade class so I removed that but the blinking is still occurring. I wish I could add a video to show you how it looks exactly, but the description will do for now. Below is a snippet of the html css and js. Is there a known way to fix the glitch?

Thanks 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-weight: bold;*/
        font-family: "Trebuchet MS", Helvetica, sans-serif;
    }

    .carousel-control-prev-icon:after {
        content: '\25C0';
        font-size: 55px;
        color: black;
        /*font-weight: bolder;*/
        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>

回答1:

With some help of a friend, the not-so-obvious solution to this blinking is to simply add

-webkit-transform: translateZ(0); -moz-transform: translateZ(0);

into the css of the container within container-inner. Not exactly sure why it is the solution to the glitch in safari, but it solved the problem!

回答2:

Add CSS in Custom.css or style.css

body{
   overflow-x: hidden;
   -webkit-transform: translateZ(0); 
  -moz-transform: translateZ(0);
}

回答3:

fixed the blinking (but the slide animation from right to left will not work - slides just appear):

.carousel-item {
-webkit-transform: translateZ(0); -moz-transform: translateZ(0); 
}

来源：https://stackoverflow.com/questions/53640528/bootstrap-4-carousel-is-blinking-during-transitions-on-safari-browser