Search code examples
firefoxtransitioncompass-sass

Compass single-transition mixin not working in Firefox 22

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.

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.