Compass single-transition mixin not working in Firefox 22

compass-sass, firefox, transition

Solution

It turns out Firefox won't accept just a 0 for the delay time, it has to either not be there or have an 's', or 'ms'.

I'll just see myself out.

Problem

I'm using Sass 3.2.9, Compass 0.13.alpha.4, and Susy 1.0.9 on this project. Here is the scss: ``` .callout-image-wrap { @include single-transition(border-color, .5s, ease-in-out, 0); @include rem(border-bottom, 5px solid $mxn-light-blue); &:hover { border-bottom-color : $mxn-dark-blue; } } ``` and here is the generated css: ``` .callout-image-wrap { -webkit-transition: border-color 0.5s ease-in-out; -webkit-transition-delay: 0; -moz-transition: border-color 0.5s ease-in-out 0; -o-transition: border-color 0.5s ease-in-out 0; transition: border-color 0.5s ease-in-out 0; border-bottom: 5px solid #0099ff; border-bottom: 0.3125rem solid #0099ff; } .callout-image-wrap:hover { border-bottom-color: #003399; } ``` It doesn't look like FF is even picking up the transitions. Yet, it is working just fine in Chrome. Was there a change in the way Mozilla prefixes transitions? Or maybe in how Compass is generating them? Or am I writing it wrong? I also tried doing: ``` @include transition(border-color .5s ease-in-out 0); ``` I've used this mixin on past projects without issue, so I'm pretty stumped on this one.

Original source