Transizione non funziona con firefox

**Franco85** · 11-01-2016, 22:43

Buonasera a tutti, vorrei capire perchè questa transizione funziona solo con Chrome e non con firefox e neanche con ie, ho provato senza immagini, solo colori e va con tutti e tre i browser ma con le immagini cambia la foto senza fare la transizione

codice:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
<style> 
    
.obclass0{
    width:500px; 
    height:700px;
    background-image: url(http://imageshack.com/a/img661/2360/Euz6Bx.jpg);
    background-repeat: no-repeat; 
    background-attachment: scroll;
    position:absolute; 
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    transition-duration: 0.4s;    
     }
.obclass1{
    width:500px; 
    height:700px;
    background-image: url(http://imageshack.com/a/img538/6941/ATDxcC.jpg);
    background-repeat: no-repeat; 
    background-attachment: scroll;
    position:absolute;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
    
     }    
.obclass2{
    width:500px; 
    height:700px;
    background-image: url(http://imageshack.com/a/img540/9468/yWAbBG.jpg);
    background-repeat: no-repeat; 
    background-attachment: scroll;
    position:absolute;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
     }     
.obclass3{
    width:500px; 
    height:700px;
    background-image: url(http://imageshack.com/a/img913/5056/ExjMZ9.jpg);
    background-repeat: no-repeat; 
    background-attachment: scroll;
    position:absolute;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    transition-duration: 0.4s;     }     
button{
    position:absolute;
     }
    
    </style>
</head>
<body>


<a class="obclass3" href="http://www.link3.html"></a>
<a class="obclass2" href="http://www.link2.html"></a>
<a class="obclass1" href="http://www.link1.html"></a>
<a id="object" class="obclass0"  href="http://www.link0.html"></a>


    <button onclick="toggle()"><h3>clicca</h3></button>


<script>
function toggle() {
       var object=document.getElementById("object");
       if (object.className=="obclass0"){
           object.className="obclass1",
               object.href="http://www.link1.html"}
     else  if (object.className=="obclass1"){
         object.className="obclass2",
             object.href="http://www.link2.html"}
     else  if (object.className=="obclass2"){
         object.className="obclass3",
             object.href="http://www.link3.html"}
     else if (object.className=="obclass3"){
         object.className="obclass0",
             object.href="http://www.link0.html"}
}
</script>


</body>
</html>

**fcaldera** · 11-01-2016, 22:58

Non ho modo di testare, che dipenda dall'aver scelto "object" come variabile/id? O magari perché non hai definito su quali proprietà fare la transizione?

Ad ogni modo vedi se nella console degli errori di Firefox ci sono messaggi e riportali qui

**Franco85** · 11-01-2016, 23:03

grazie per avermi risposto, mi dispiace ma non ci sono errori...

**Franco85** · 11-01-2016, 23:15

ho provato a modificare in un altro modo ma è lo stesso come prima: Chrome va alla grande, firefox non usa la transizione

codice:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
<style> 
    
.obclass0{
    width:500px; 
    height:700px;
    background-image: url(http://imageshack.com/a/img661/2360/Euz6Bx.jpg);
    background-repeat: no-repeat; 
    background-attachment: scroll;
    position:absolute; 
    -webkit-transition:background 0.4s;
    -moz-transition:background 0.4s;
    -o-transition:background 0.4s;
    transition:background 0.4s;    
     }
.obclass1{
    width:500px; 
    height:700px;
    background-image: url(http://imageshack.com/a/img538/6941/ATDxcC.jpg);
    background-repeat: no-repeat; 
    background-attachment: scroll;
    position:absolute;
     -webkit-transition:background 0.4s;
    -moz-transition:background 0.4s;
    -o-transition:background 0.4s;
    transition:background 0.4s; 
    
     }    
.obclass2{
    width:500px; 
    height:700px;
    background-image: url(http://imageshack.com/a/img540/9468/yWAbBG.jpg);
    background-repeat: no-repeat; 
    background-attachment: scroll;
    position:absolute;
     -webkit-transition:background 0.4s;
    -moz-transition:background 0.4s;
    -o-transition:background 0.4s;
    transition:background 0.4s; 
     }     
.obclass3{
    width:500px; 
    height:700px;
    background-image: url(http://imageshack.com/a/img913/5056/ExjMZ9.jpg);
    background-repeat: no-repeat; 
    background-attachment: scroll;
    position:absolute;
    -webkit-transition:background 0.4s;
    -moz-transition:background 0.4s;
    -o-transition:background 0.4s;
    transition:background 0.4s;      }     
button{
    position:absolute;
     }
    
    </style>
</head>
<body>


<a class="obclass3" href="http://www.link3.html"></a>
<a class="obclass2" href="http://www.link2.html"></a>
<a class="obclass1" href="http://www.link1.html"></a>
<a id="object" class="obclass0"  href="http://www.link0.html"></a>


    <button onclick="toggle()"><h3>clicca</h3></button>


<script>
function toggle() {
       var object=document.getElementById("object");
       if (object.className=="obclass0"){
           object.className="obclass1",
               object.href="http://www.link1.html"}
     else  if (object.className=="obclass1"){
         object.className="obclass2",
             object.href="http://www.link2.html"}
     else  if (object.className=="obclass2"){
         object.className="obclass3",
             object.href="http://www.link3.html"}
     else if (object.className=="obclass3"){
         object.className="obclass0",
             object.href="http://www.link0.html"}
}
</script>


</body>
</html>

**fcaldera** · 12-01-2016, 10:31

https://bugzilla.mozilla.org/show_bug.cgi?id=546052

La transizione tra immagini di sfondo non è supportata in Firefox

**Franco85** · 12-01-2016, 12:08

che roba....sono passati circa 4 anni da quei thread, e non si è arrivati ancora a nulla....grazie per l'aiuto fcaldera

Discussione: Transizione non funziona con firefox

Strumenti discussione

Ricerca discussione

Visualizza

Transizione non funziona con firefox

Permessi di invio