-moz-transition: background 1s linear; nie dziala na firefoxie

Question

Witam. Zrobilem sobie slider na background-image przy pomocy css i jQuery. Wszystko smiga na Chrome, ale na edge i firefoxie sie wysypuje. Ktos wie co robie zle?

Kod HTML

<section id="whoAreWe">
            <h2><a href="whoarewe.php">Who are we?</a></h2>
            <h3>We are a team of professionals</h3>
            <article>
                <span>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi itaque, tempore! Accusantium
                        aspernatur aut blanditiis esse eveniet ex excepturi facilis inventore, natus perferendis quasi
                        ratione recusandae, rem sapiente unde voluptate? Located in
                        Barrie
                        <a href="whoarewe.php">Read more</a>
                    </p>
                </span>
            </article>
        </section>

 

Kod scss 

@mixin background($path) {
  //image
  -webkit-background-image: url($path);
  -moz-background-image: url($path);
  -o-background-image: url($path);
  background-image: url($path);
  //cover
  -webkit-background-size: cover;
  -o-background-size:cover;
  -moz-background-size:cover;
  background-size: cover;
  //transition
  transition-duration: 1s;
  -webkit-transition: background-image 1s linear;
  -moz-transition: background 1s linear;
  -o-transition: background-image 1s linear;
  transition: background-image 1s linear;
  //Rest
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;

}

@mixin backgrounds($page) {
  @media screen and (max-width: 450px) {
    article {
      @include background("../Assets/Images/Cropped/Phone 425x640/"+$page+"/pp1.jpg");
      background-size: cover;
    }
  }
  @media screen and (min-width: 451px) {
    article {
      @include background("../Assets/Images/Copies/"+$page+"/pp1.jpg");
    }
  }
section#whoAreWe {
  @include backgrounds("whoAreWe");
}

Kod JS

if (viewportWidth > 1400 && document.title == "3B Solutions") {
    $(document).ready(function () {
        zmienTlo("whoAreWe");
    });
}



// CHANGE THIS VARIABLE
var ileZdjec = 5;
// DO NOT TOUCH
var ktoreZdj = 0;
var sekcjaa;

function zmienTlo(sekcja) {
    sekcjaa = "section#" + sekcja + ">article";
    if (ktoreZdj > ileZdjec - 1)//Zaczynamy od 0
        ktoreZdj = 0;
    $(sekcjaa).css("background-image", "url(\"Assets/Images/Copies/" + sekcja + "/pp" + ktoreZdj + ".jpg\")");
    ktoreZdj++;
    return setTimeout(function () {
        zmienTlo(sekcja);
    }, 3000);
}

 

Answer 1

Właściwości, na których działa transition

Prefiksy przy tych właściwościach nie są potrzebne, poczytaj i wdroż w życie autoprefixer.

Comments

Dodalem te prefixy z rozpaczy, po tym jak na normalnym transition nie dzialalo