My website features a bootstrap carousel with slides that have a parallax effect. While this functionality works perfectly in every browser except Firefox.
<!--Carousel Wrapper-->
<div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-2" data-slide-to="1"></li>
<li data-target="#carousel-example-2" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="view slidescss" style="background:url('https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg')no-repeat fixed center;">
<div class="mask rgba-black-light"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Light mask</h3>
<p>First text</p>
</div>
</div>
<div class="carousel-item">
<div class="view slidescss" style="background:url('https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg')no-repeat fixed center;">
<div class="mask rgba-black-light"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Strong mask</h3>
<p>Secondary text</p>
</div>
</div>
<div class="carousel-item">
<div class="view slidescss" style="background:url('https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg')no-repeat fixed center;">
<div class="mask rgba-black-light"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Slight mask</h3>
<p>Third text</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-example-2" 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="#carousel-example-2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
</div>
Custom CSS Classes:
.slidescss{
background-size:1920px 1080px;
width:100%;
min-height:800px;
}
Tested the carousel in various browsers and noted an issue with Firefox resizing caption placement above the image and altering the background color. Attempted to fix by modifying the background URL, adversely affecting the parallax effect.