Take a look at
If you click on one of the large brown rectangles, a jQuery script adds a "dropped" class which changes the top position. Surprisingly, this transition effect does not work in the latest version of Firefox, unlike in other browsers. I am puzzled by this behavior. Interestingly, when I manually add the class using the in-browser debugger, it transitions smoothly! If anyone has any insights or suggestions regarding this issue, I would greatly appreciate it.
Below is my CSS (less) code:
.card {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
-webkit-transition: 0.6s top 0;
-moz-transition: 0.6s top 0;
-o-transition: 0.6s top 0;
-ms-transition: 0.6s top 0;
transition: 0.6s top 0;
img {
width: 100%;
}
&.one {
z-index: 4;
background: @brown1;
background-size:100% auto;
top: 0%;
&.dropped {
top: 90%;
}
}
&.two {
z-index: 3;
background: @brown2;
top: 0;
&.dropped {
top: 85%;
}
}
&.three {
z-index: 2;
background: @brown3;
top: 0;
&.dropped {
top: 80%;
}
}
}