Angular custom Filter not working in Firefox

Question

I have an issue in firefox (tested and works in chrome and IE) whereby a custom filter is not functioning. Here is the repeated template:

    <img src="/Images/blank.gif" ng-class="a.VolunteerStatus | classSwitch:{1:'icon  assignment_status assignment_empty',2:'icon assignment_status assignment_inactive',3:'icon assignment_status assignment_unverified',4:'icon assignment_status assignment_verified'}" ng-click="toggleVolunteerStatus(a)" title="" />

This basically is an image with a css class that switches based on the underlying status. Here is the filter in my module:

    departmentModule.filter('classSwitch', function () {
        return function (input, map) {
            return map[input] || '';
        };
    }); 

Firefox shows no bugs in the console, but the filter in firefox ALWAYS returns the 2nd switch regardless of the underlying data. So ALL the elements have class:icon assignment_status assignment_inactive

If it helps, here is the element rendered in Firefox:

    <img class="icon assignment_status assignment_inactive" src="/Images/blank.gif" ng-class="a.VolunteerStatus | classSwitch:{1:'icon assignment_status assignment_empty',2:'icon assignment_status assignment_inactive',3:'icon assignment_status assignment_unverified',4:'icon assignment_status assignment_verified'}" ng-click="toggleVolunteerStatus(a)" title="">

See plunker here courtesy of Marck.

Any ideas fellow developers? Your time reading this is much appreciated. Thanks.

Answer 1

Your CSS uses a non-standard property that Firefox doesn't recognize...

For example, this:

background-position-y: -20px;

should be:

background-position: 0 -20px

I replaced those properties in this Plunker, where the icon shown does change in Firefox as you update your scope property.