Bootstrap 3 Carousel flickering black - html

Question

I'm using a carousel to slide blocks of text. This works fine, however often a black flickering appears between the transitions. This is especially the case in Firefox and also when the screen is resized to smaller and after that maximized again. I posted a demo here:
https://jsfiddle.net/dr5zbj1m/
I'm using Bootstrap 3. Does anyone know a solution to this?
<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;
}