Question

i have a problem whit this site http://www.lookcommunication.it/korus/WEPA/IT/index.php

The squares box(INDEX),in Chrome, have a -webkit-transition-duration: 0.4s; and all is ok. But with FF this effect not function.

The shadow under the box have the same effect and in Chrome and FF function.

Why my box does not move?

Thanks for help

.label
{
position:relative; 
z-index:3;  
-webkit-transition-property: top, bottom; 
-webkit-transition-duration: 0.4s; 
-moz-transition-duration: 0.4s; 
transition-duration: 0.4s; 
-o-transition:0.4s; 
-moz-transition-property: top, bottom;

}
Was it helpful?

Solution

This is probably because Firefox doesn't know what value of top it must switch to.

Indeed, Firefox sees that top is set to -10px in .label:hover but cannot find the value of top in the label declaration.

You simply have to set top to 0 in the label declaration:

.label {
    // Your code
    top: 0;
}

It works for me!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top