Parallax effect working on Chrome but not in Firefox

Question

I'm having the following problem. I've done a carousel in Bootstrap, and the images that are in the slides of the carousel have a parallax effect. In Chrome, this is working perfectly, but in Firefox the images are static, the parallax is not working. Does anyone have any clue on what's going on? Here's my code:

Carousel code: ``` ⁠⁠⁠

<div style={{height: '100%', maxHeight: '100%'}}>
    <div id="mainCarousel" className="carousel slide caption-animate control-round indicators-line" data-ride="carousel" data-pause="hover" data-interval="6000">
        <ol className="carousel-indicators">
            <li data-target="#mainCarousel" data-slide-to="0" className="active"></li>
            <li data-target="#mainCarousel" data-slide-to="1"></li>
            <li data-target="#mainCarousel" data-slide-to="2"></li>
        </ol>
        <div className="carousel-inner" role="listbox">
            <div id="pruebaImg" className="item active">
                <div className="carousel-caption container-fluid">
                    <div className="background"></div>
                    <div className="row footer-carousel">
                        <div className="col-xs-12 col-sm-12 col-md-12 text-center">
                            <h1>EL CAMPO ESTÁ DE MODA</h1>
                        </div>
                    </div>
                </div>
        </div>
        <div id="pruebaImg2" className="item">
            <div className="carousel-caption container-fluid">
                <div className="background"></div>
                <div className="row footer-carousel text-center">
                    <h3>
                        el canal de televisión OTT, la estrategia mas grande de promoción
                        del sector agropecuario colombiano
                    </h3>
                </div>
            </div>
        </div>
        <div id="pruebaImg3" className="item">
            <div className="carousel-caption container-fluid">
                <div className="background"></div>
                <div className="row footer-carousel">
                    <h3>Ofrecemos soluciones eficientes para iluminar tus proyectos</h3>
                </div>
            </div>
        </div>
    </div>
    <a className="left carousel-control" href="#mainCarousel" role="button" data-slide="prev">
        <span className="glyphicon glyphicon-menu-left" aria-hidden="true"></span>
        <span className="sr-only">Previous</span>
    </a>
    <a className="right carousel-control" href="#mainCarousel" role="button" data-slide="next">
        <span className="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
        <span className="sr-only">Next</span>
    </a>
</div>

CSS code:

#pruebaImg{
        background-image: url(${require('../../assets/tractor-1522281_1920_s.jpg')}) ;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100vh;


    }