Firefox transition when adding a class

Question

Take a look at http://gull.calvin-evans.mixture.io/

When you click one of the large brown rectangles, the "drop" class is applied with jQuery, which changes the top position. This does not happen at all in the latest version of FF, as in most other browsers, and I have no idea why. When I use the debugger in the browser and add the class manually to the markup, these are bloody transitions! So strange. If anyone has any ideas on this, it will be very appreciated.

Here is my CSS (less) to write:

.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%; } } } 

Answer 1

The problem is in your JavaScript application (or jQuery ...).

When I manually added onclick="this.className += ' dropped'" , it works correctly, but I can’t tell exactly where the problem is in the script, because you have a smaller script.