CODEWITHSUNDEEP
jquerycssfirefox
trainoasis
trainoasis

Reputation: 6720

Replicate filter (hue-rotate) in Firefox? (dynamically)

I have an image which has this 'hue' class:

.hue {
        -webkit-transition:all 1s ease-in-out; 
     transition:all 1s ease-in-out;

    -webkit-filter: hue-rotate(0deg); 
    filter:hue-rotate(0deg); 
}

Then I change this hue with jquery:

$('.hue').css({
        '-webkit-filter'    : 'hue-rotate('+d+'deg)', 
        'filter'            : 'hue-rotate('+d+'deg)'  

});

which happens slowly as it should in Chrome and Safari (webkit). What do I need to do to get this working in Firefox?

As far as I know there is no -moz-filter or -moz-transition (source) and hue-rotate should work in FF (source).

There is almost the same question asked here but the answer doesn't suit me since libraries like PaintbrushJS have predefined filters whereas I need to set hue value myself.

Any help or workaround to accomplish this in FF highly appreciated!

EDIT: Pixastic seems to allow setting custom values, but I can't apply the transition or slow effect ... This is the last issue now :)

EDIT2 I managed to set hue on FF with the help of SVG (rather ugly). If you add next line to your css (next to -webkit-filter which works for Chrome and Safari): 

filter:url(file.svg#myFilter)

and create file.svg :

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg">
<defs>
   <filter id="myFilter">
     <feColorMatrix type="hueRotate" values="140"/>
   </filter>
   <filter id="myFilter2">
     <feColorMatrix type="hueRotate" values="50"/>
   </filter>
</defs>
</svg>

this works. Anyhow it fails when trying to change it dynamically like this:

$('.hue').css({
    '-webkit-filter'    : 'hue-rotate('+d+'deg)', /* this works */
    'filter'            : 'url(filters.svg#'+myFilterName+')' /* this doesnt */
});

(I can see that the change on the element occurred but page just goes white)

Upvotes: 0

Views: 1411

Answers (1)

Alon Dahari
Alon Dahari

Reputation: 1147

This is experimental technology that doesn't have support in FF as to now. Have a look at the compatibility table, from the same page of the link you provided.

I suggest opening a suggestion for implementation with PaintbrushJS or Pixstatic with the improvements you mentioned (Pixstatic doesn't seem to be open source so you'll have to maybe contact them through email).

Maybe even implement a new filter into PaintbrushJS yourself and issue a pull request!

Upvotes: 0

Related Questions