Bootstrap 3 Carousel闪烁黑色

Question

我使用旋转木马滑动文本块。这样可以正常工作，但是在转换之间通常会出现黑色闪烁。在Firefox中尤其如此，当屏幕调整为较小并且之后再次最大化时。我在这里发布了一个演示：

https://jsfiddle.net/dr5zbj1m/

我使用Bootstrap 3.有没有人知道解决方案？

<div class="container">
    <div id="myCarousel" class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <div class="row row-carousel">
                    <div class="col-md-12">
                    <div class="well">
                      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod metus ipsum, non ullamcorper augue rutrum non. Donec id ante eleifend quam tristique pharetra.</p>
                      <p><br><img src="http://www.tanld.com/images/livedemo.png " class="img-responsive"></p>
                      <p class="text-center"><br><a class="btn btn-primary btn-lg" href="#">Test</a></p>
                    </div>
                  </div>
              </div>
            </div>
            <div class="item ">
                <div class="row row-carousel ">
                    <div class="col-md-12">
                        <div class="well ">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod metus ipsum, non ullamcorper augue rutrum non. Donec id ante eleifend quam tristique pharetra.</p>
                            <p>
                                <br>
                                <img src="http://www.tanld.com/images/livedemo.png " class="img-responsive">
                            </p>
                            <p class="text-center ">
                                <br><a class="btn btn-primary btn-lg " href="# ">Test</a>

                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="row row-carousel">
                    <div class="col-md-12">
                    <div class="well ">
                      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod metus ipsum, non ullamcorper augue rutrum non. Donec id ante eleifend quam tristique pharetra.</p>
                      <p><br><img src="http://www.tanld.com/images/livedemo.png " class="img-responsive"></p>
                      <p class="text-center "><br><a class="btn btn-primary btn-lg" href="# ">Test</a></p>
                    </div>
                  </div>
              </div>
            </div>
          </div>
        </div>
    </div>

.call-to-action {
    display:block;
    margin: 0 auto;
    margin-top:20px;
    text-align:center;
}
.row-carousel {
    padding-top:20px;
    padding-bottom:50px;
}
.carousel-indicators li {
    width: 10px;
    height: 10px;
    background-color: red;
    border: 2px solid #786C8C;
    .col-md-12-carousel {
        text-align: center
    }
    .carousel {
        margin-bottom: 0;
    }
    .img-responsive {
        display: block;
        height: auto;
        max-width: 100%;
        margin: 0 auto;
    }