javascript - Bootstrap 4 Carousel 在 Safari 浏览器的转换过程中闪烁

Question

我在 drupal 平台上实现了一个 bootstrap 4 carousel 作为一个功能。这个旋转木马在 chrome 上工作得很好，但在 safari 上，旋转木马会过渡到下一张幻灯片，但会闪烁一次，然后继续到下一张幻灯片(有一个设定的间隔时间)。最初我认为它与 B4 交叉淡入淡出类有关，所以我删除了它，但闪烁仍在发生。我希望我可以添加一个视频来向您展示它的确切外观，但现在只需要描述即可。下面是 html css 和 js 的片段。有没有已知的方法来修复故障？

提前致谢!

杰玛

<!--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>

Answer 1

在 friend 的帮助下，这个闪烁的不太明显的解决方案是简单地添加

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

进入容器内部容器的CSS。不确定为什么它是 safari 中故障的解决方案，但它解决了问题!