视差效果在Chrome上运行但在Firefox

Question

我遇到以下问题。我在Bootstrap中做过旋转木马，旋转木马幻灯片中的图像具有视差效果。在Chrome中，这是完美的工作，但在Firefox中，图像是静态的，视差不起作用。有没有人知道发生了什么？这是我的代码：

轮播代码： ``` ⁠⁠⁠

<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代码：

#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;


    }