Slick slider issues in Firefox


HippySunshine

Senior Member
Me again! I'm sorry I post all my problems here, but you guys are great at advice and getting me out of sticky situations, and I learn a lot from your answers!
So as long as you keep helping, I'm going to keep asking :X3: But seriously, apreciate you all!

Anyway... Ido have a problem I could do with some help on:

I have a full page slick-slider in WordPress made from images selected by the ACF gallery.
The slides are full height and width divs with a background image each. There is one content box sitting on top of the slider with an initial animation on page load - this does not change with the slides - just the bg image slides change.
The slides (images) should fade out and fade back in the next slide (image). This works great everywhere, except for Firefox. After the image fades out, we see the background-color of the parent div and then the next slide (image) JUMPS in, without fade.

I can't show you a live link as it's an unpublished client site :(

This is hard to explain, so apologies if it's a little confusing. Here is my code:

jQuery:

JavaScript:
$(function() {
    $('.slider').slick({
        infinite: true,
        mobileFirst: true,
        vertical: false,
        fade: true,
        cssEase: 'ease-in-out',
        easing: 'linear',
        autoplay: true,
        autoplaySpeed: 3000,
        speed: 3000,
        dots: false,
        arrows: false,
        pauseOnHover: false,
        slidesPerRow: 1,
        slidesToShow: 1,
        slidesToScroll: 1
    });
});
Template PHP:

PHP:
<?php
    $title = get_field('home_title');
    $link = get_field('home_link');
    $content = get_field('home_content');
    $bg_images = get_field('home_bg_images');
   
    if ( $title || $link || $content || $bg_images ) :
?>

    <div class="home__hero">
        <div class="slider">
            <?php
                if( $bg_images ) {
                foreach( $bg_images as $image ):
            ?>
                <div class="slick-slide" style="background-image: url('<?php echo $image['url']; ?>');"><div class="overlay"></div></div>
            <?php
                endforeach;
                } else {
            ?>
                <div class="slick-slide"></div>
            <?php } ?>
        </div>

        <?php if ( $title || $link || $content ) : ?>
            <div class="content">
                <?= ($title)? '<h1 class="title">' . $title . '</h1>' : ''; ?>
                <div class="curved-line"></div>
                <?= ($content)? '<div class="text">' . $content . '</div>' : ''; ?>
                <?= ($link)? '<a class="link" href="' . $link['url'] . '" target="' . $link['target'] . '">' . $link['title'] . '</a>' : ''; ?>
            </div>
        <?php endif; ?>
    </div>
<?php endif; ?>
scss:

SCSS:
// base
.slider {
    padding: 0;
    margin: 0;

    .slick-list {
        height: 100%;
        width: 100%;  
    }

    .slick-track {
        height: 100%;
        width: 100%;
    }

    .slick-dots,
    .slick-arrow {
        display: none;
    }
}


// home page slider

.home {
    background-color: $navy_black;
    position: relative;
    top: 0;
}

.home__hero {
    background-color: transparent;
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;

    .slider {
        width: 100%;
        height: 100%;
        position: relative;
        opacity: 0;
        animation: blurAnimation 1s forwards 0.7s;

    .slick-slide {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        height: 100%;
        width: 100%;
        z-index: 1;
        position: absolute;
    }
}

.content {
    width: 90%;
    max-width: 750px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;

    h1.title {
        span {
            opacity: 0;
            animation: blurAnimation 1.7s forwards;
        }
    }

    .curved-line {
        width: 0;
        animation: curvedLine 1.4s forwards 1.2s;
    }

    .text {
        opacity: 0;
        animation: blurAnimation 1.4s forwards 2.8s;
    }
}
Any suggestions for a firefox fix would be much appreciated.
 

HippySunshine

Senior Member
Nevermind - I fixed it... I had the wrong animation on .slider :X3:
Sometimes I swear I shouldn't be coding. I've spent way too many hours on this!
 
Top