Firefox is removing transition mixin result

Question

I have this mixin in a .less:

.transition(@transition) {
  transition: @transition;
  -webkit-transition: @transition;
     -moz-transition: @transition;
}

the mixin is used in the next .less:

.animate-epg-now.ng-enter {
    .transition(left @transition-duration @transition-type @transition-delay);
    z-index: -1;
    display: block !important;
    left: -@transition-displacement;
}

and the compiled css is:

.go-mdl-epg-drct-main-epg .animate-epg-now.ng-enter {
  transition: left 0.2s ease-out 0;
  -webkit-transition: left 0.2s ease-out 0;
  -moz-transition: left 0.2s ease-out 0;
  z-index: -1;
  display: block !important;
  left: -400px;
}

In Chrome, Safari, IE, it work's perfect, but in firefox, the transition lines have been removed!, in firebug i see the source css and this is the firefox result's:

.go-mdl-epg-drct-main-epg .animate-epg-now.ng-enter {
    display: block !important;
    left: -400px;
    z-index: -1;
}

I can't explain me that, to be sure, in Chrome i see the same css and the transition sentences have appear, and transition works, why firefox is discarding those lines?

Kalamarico · Accepted Answer · 2018-01-19T11:13:27.613

1

The problem was the unit 0 in time, like this thread says, firefox implement the standard correctly, and I have to change the transition-delay to 0s

edited Jan 19 '18 at 11:13

answered Apr 23 '14 at 08:53

Kalamarico

5,466
22
53
70

Firefox is removing transition mixin result

1 Answers1