Filter FF issue

by SerGen

HTML

<div class="static" style="filter: grayscale(50%)">
    <div class="fixed"></div>
</div>

<div class="static static--dynamics">
    <div class="fixed"></div>
</div>

CSS

.static {
    background-color: red;
    width: 200px;
    height: 100px;
}
.fixed {
    position: fixed;
    top: 50%;
    left: 0;
    width: 100%;
    height: 10px;
    background-color: green;
    
    -webkit-animation: anim 3s infinite;
            animation: anim 3s infinite;
}

.static--dynamics {
    background-color: blue;
}
.static--dynamics .fixed {
    background-color: yellow;
}

@-webkit-keyframes anim {
	from { top: 50%; }
    50% { top: 0%; }
	to { top: 50%; }
}
@keyframes anim {
	from { top: 50%; }
    50% { top: 0%; }
	to { top: 50%; }
}

JavaScript

setInterval(function(){
    [].forEach.call(document.querySelectorAll('.static'), function(static){
        addFilter(static);
    });
}, 4000);

function addFilter (elem) {
    var val = 'grayscale(50%)';
    
    if (elem.style.webkitFilter === val || elem.style.filter === val) {
        elem.style.webkitFilter = '';
        elem.style.filter = '';
    } else {
        elem.style.webkitFilter = val;
        elem.style.filter = val;
    };
};