Parallax effect on bootstrap carousel won't work in Firefox

Question

For my website I made a bootstrap carousel, with different slides which each have a parallax effect, in Every browser this works fine except Firefox.

JSFiddle

<!--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">
            <!--Mask color-->
            <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">
            <!--Mask color-->
            <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>
    <!--/.Slides-->
    <!--Controls-->
    <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>

Own CSS Classes:

.slidescss{
    background-size:1920px 1080px;
    width:100%;
    min-height:800px;
}

Try this in in any browser, and then Firefox. In Firefox, the caption is put above the image, and either the background is white or grey. It pushes the image down. I sort of fixed this by removing the center attribute from background:url() . But it still has no Parallax effect.

Answer 1

It is in conflict with

-webkit-transform: translate3d(0,0,0);

You can remove it, than it'll work.

https://jsfiddle.net/aq9Laaew/16131/

Kind regards, Rakowu