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.

Rakowu · Accepted Answer · 2018-04-20 08:36:45Z

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

answered Apr 20, 2018 at 8:36

Rakowu

16410 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Rick J Over a year ago

Thanks! It's been a headache, searching the web for the possible problem.

Rick J Over a year ago

Would you also know why my image in the carousel is pushed down in firefox when it slides? I added center to it, and this is messing up the image when the animation to slide starts. I added the center attribute to the no-repeat fixed attributes..

Rakowu Over a year ago

Could you send me a screenshot? To reproduce your bug :)

Rakowu Over a year ago

Ok i guess i get what you mean. Use Instead of center, center top. And give it a height of for example 600px. If you making your webside responsive you can use 100vh for fullsize :) jsfiddle.net/aq9Laaew/19536 <div class="view slidescss" style="background:url('mdbootstrap.com/img/Photos/Slides/img%20(68).jpg')no-repeat fixed top center;">

Rakowu Over a year ago

i guess it happens because the image until the slide ends doesn't know its width. Ist he width of the image beeing calculated with javascript? Try giving the element (with the image background) a width (try it first px based). If it does what it should do, than it has a problem with the javascript or % based width

|

Collectives™ on Stack Overflow

Parallax effect on bootstrap carousel won't work in Firefox

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related