Grow your CSS skills. Land your dream job.

filters in chrome and firefox

  • # November 15, 2012 at 10:00 pm

    I have a 3 column fluid site [wordpress template]

    and I have added a grayscale filter to all my images. simple and effecting.

    there are a couple of issues that I am having and can’t figure out. so here goes.

    – i had to disable the filter in firefox as is was loading blank images that only showed upon rollover

    – loads fine in chrome, but when the user begins to scroll, random images flicker blank.

    – the contrast in safari is outta control. is there any way to bring this in line with how it looks in chrome?

    http://www.roberterdmann.com

    i used a simple comment marker to disable the firefox filter.

    .item-image img {
    /*filter: url(filters.svg#grayscale);
    filter: gray;
    -moz-filter: grayscale(100%);
    -moz-transition: all .5s ease;
    -moz-backface-visibility:hidden;*/
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -moz-appearancewebkit-transition: all .5s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
    display:block;
    opacity:0;
    }

    .item-image img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
    }

    # November 16, 2012 at 10:18 am

    I have no idea but your filter properties are in the wrong order.

    The un-prefixed version should ALWAYS be last.

    # November 16, 2012 at 10:36 am

    highly experimental no standardisation infact doesn’t even work on mozilla’s engine when im using their own examples. https://developer.mozilla.org/en-US/docs/CSS/filter

    # November 16, 2012 at 11:11 am

    Yeah…I had a feeling it was only Chrome (beta) that was using it at the moment.

    # November 16, 2012 at 11:30 am

    firefox seems to work with the svg version of it but the -moz nop, which is werid what else uses the mozilla prefix that isn’t gecko engine. I just did a lil codepen to test it out and im having no trouble getting it working in firefox. (thought transitions don’t appear to have an affect on it, probably not a transitionable property)
    http://caniuse.com/#search=filter < --- says it all really

    focus on the svg filters version, thats whats going to give you the most cross browser comptability.
    Also check your filters.svg if its loading blank images i suspect it may be borked.

    # November 19, 2012 at 7:17 pm

    Hey thanks for all your feedback. it’s truly appreciated.

    This is one area that is still a little new to me, so i am learning as i go.

    i’ll post if i have success.

    thanks guys!

    # November 19, 2012 at 8:06 pm

    So, here is what i figured out that works best for me.

    I fixed the SVG filter for firefox.

    to resolve the issues i was having in safari [far too much contrast] and the image flickering in chrome i did this:

    .item-image img {
    /*-webkit-filter: grayscale(100%);/* Chrome 19+ & Safari 6+ */
    /*-webkit-transition: all .5s ease; /* Fade to color for Chrome and Safari */
    /*-webkit-backface-visibility: hidden; /* Fix for transition flickering */
    /*-moz-filter: grayscale(100%);*/
    /*-moz-transition: all .5s ease;
    -moz-backface-visibility:hidden;


    ABOVE IS NOt TO BE USED – CAUSES FLICKERING IN CHROME AND EXCESS CONTRAST IN SAFARI*/
    -webkit-filter: grayscale(1);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray;
    filter: url(filters.svg#grayscale);
    display:block;
    opacity:0;
    }

    .item-image img:hover {
    -webkit-filter: grayscale(0);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: none;
    }

    it seems that i needed to use the older webkit filter instead of the newer – strange because all my browsers are the latest. but it’s working.

    # January 26, 2014 at 2:39 pm

    Goodnight,

    I have a problem reading this thread I hope you can help me.

    I am making an app based OS Firefox, Gecko and would like to make effects like: sepia color, brightness, contrast and border radius.

    Right now I have running grayscale and opacity, but these four that I comment I fail to make them work, and I know that is the subject of SVG do not know to put on .css as I have not found a minimal example of this…

    Then I leave a piece of code, which refers to the effects, if anyone could help me.

    Regards and thanks.

    HTML

    Grayscale <input type=”range” name=”slider-1″ value=”0″ step=”25″ min=”0″ max=”100″ onchange=”setEffect(‘grayscale’, this.value)” …

    Border Radius <input type=”range” name=”slider-2″ value=”0″ step=”1″ min=”0″ max=”4″ onchange=”setEffect(‘borderRadius’, this.value)” …

    Sepia Colour <input class=”sepia” type=”range” name=”slider-2″ id=”slider-2″ value=”0″ step=”1″ min=”0″ max=”4″ onchange=”setEffect(‘sepia’, this.value)” …

    Brightness <input class=”brightness” type=”range” name=”slider-3″ id=”slider-3″ value=”0″ step=”1″ min=”0″ max=”4″ onchange=”setEffect(‘brightness’, this.value)” …

    Contrast <input class=”contrast” type=”range” name=”slider-4″ id=”slider-4″ value=”0″ step=”1″ min=”0″ max=”4″ onchange=”setEffect(‘contrast’, this.value)” …

    CSS

    .grayscale_low { -webkit-filter: grayscale(25%); -moz-filter: url(“filter/grayscale_low.svg”); /* Firefox 3.5+ /; -o-filter: grayscale(25%); -ms-filter: grayscale(25%); filter: grayscale(25%); filter: url(“data:image/svg+xml;utf8,#grayscale”); / Firefox 10+, Firefox on Android */ }

    .grayscale_medium { -webkit-filter: grayscale(50%); -moz-filter: grayscale(50%); -o-filter: grayscale(50%); -ms-filter: grayscale(50%); filter: grayscale(50%); filter: url(“data:image/svg+xml;utf8,#grayscale”); /* Firefox 10+, Firefox on Android */ }

    .grayscale_medium_high { -webkit-filter: grayscale(75%); -moz-filter: grayscale(75%); -o-filter: grayscale(75%); -ms-filter: grayscale(75%); filter: grayscale(75%); filter: url(“data:image/svg+xml;utf8,#grayscale”); /* Firefox 10+, Firefox on Android */ }

    .grayscale_high { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); filter: url(“data:image/svg+xml;utf8,#grayscale”); /* Firefox 10+, Firefox on Android */ }

    /* ———————————- * Sepia (Color Sepia) * ———————————- */

    .sepia_low { -webkit-filter: sepia(25%); -moz-filter: sepia(25%); -o-filter: sepia(25%); -ms-filter: sepia(25%); filter: sepia(25%); }

    .sepia_medium { -webkit-filter: sepia(50%); -moz-filter: sepia(50%); -o-filter: sepia(50%); -ms-filter: sepia(50%); filter: sepia(50%); }

    .sepia_medium_high { -webkit-filter: sepia(75%); -moz-filter: sepia(75%); -o-filter: sepia(75%); -ms-filter: sepia(75%); filter: sepia(75%); }

    .sepia_high { -webkit-filter: sepia(100%); -moz-filter: sepia(100%); -o-filter: sepia(100%); -ms-filter: sepia(100%); filter: sepia(100%); filter: url(filters.svg#sepia); }

    /* ———————————- * Brightness(Brillo) * ———————————- */

    .brightness_low { -webkit-filter: brightness(0.25); -moz-filter: brightness(0.25); -o-filter: brightness(0.25); -ms-filter: brightness(0.25); filter: brightness(0.25); }

    .brightness_medium { -webkit-filter: brightness(0.5); -moz-filter: brightness(0.5); -o-filter: brightness(0.5); -ms-filter: brightness(0.5); filter: brightness(0.5); }

    .brightness_medium_high { -webkit-filter: brightness(0.75); -moz-filter: brightness(0.75); -o-filter: brightness(0.75); -ms-filter: brightness(0.75); filter: brightness(0.75); }

    .brightness_high { -webkit-filter: brightness(1); -moz-filter: brightness(1); -o-filter: brightness(1); -ms-filter: brightness(1); filter: brightness(1); filter: url(filters.svg#brightness); }

    /* ———————————- * Contrast (Contraste) * ———————————- */

    .contrast_low { -webkit-filter: contrast(125%); -moz-filter: contrast(125%); -o-filter: contrast(125%); -ms-filter: contrast(125%); filter: contrast(125%); }

    .contrast_medium { -webkit-filter: contrast(150%); -moz-filter: contrast(150%); -o-filter: contrast(150%); -ms-filter: contrast(150%); filter: contrast(150%); }

    .contrast_medium_high { -webkit-filter: contrast(175%); -moz-filter: contrast(175%); -o-filter: contrast(175%); -ms-filter: contrast(175%); filter: contrast(175%); }

    .contrast_high { -webkit-filter: contrast(200%); -moz-filter: contrast(200%); -o-filter: contrast(200%); -ms-filter: contrast(200%); filter: contrast(200%); filter: url(filters.svg#contrast); }

    /* ———————————- * Border Radius (Bordes redondeados) * ———————————- */

    .borderRadius_low { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

    .borderRadius_medium { -webkit-border-radius: 5%; -moz-border-radius: 5%; border-radius: 5%; }

    .borderRadius_medium_high { -webkit-border-radius: 10%; -moz-border-radius: 10%; border-radius: 10%; }

    .borderRadius_high{ -webkit-border-radius: 15%; -moz-border-radius: 15%; border-radius: 15%; filter: url(filters.svg#borderradius); }

    JS

    function setEffect(effect, value){ $(‘#pickImage’).css(effect, value); // For Opacity

    var classToApply = "";
    
    switch(effect){
        case 'grayscale':
            switch(value){
                case '0':
                    $("#pickImage").removeClass("grayscale_low");               
                    break;
                case '25':
                    classToApply = "grayscale_low";
                    $("#pickImage").removeClass("grayscale_medium");
                    break;
                case '50':
                    classToApply = "grayscale_medium";
                    $("#pickImage").removeClass("grayscale_low");
                    $("#pickImage").removeClass("grayscale_medium_high");
                    break;
                case '75':
                    classToApply = "grayscale_medium_high";
                    $("#pickImage").removeClass("grayscale_medium");
                    $("#pickImage").removeClass("grayscale_high");
                    break;
                case '100':
                    classToApply = "grayscale_high";
                    $("#pickImage").removeClass("grayscale_medium_high");
                    break;
            }           
            break;
    
        case 'sepia':
                switch(value){
                    case '0':
                        $("#pickImage").removeClass("sepia_low");
                        break;
                    case '1':
                        classToApply = "sepia_low";
                        $("#pickImage").removeClass("sepia_medium");
                        break;
                    case '2':
                        classToApply = "sepia_medium";
                        $("#pickImage").removeClass("sepia_low");
                        $("#pickImage").removeClass("sepia_medium_high");
                        break;
                    case '3':
                        classToApply = "sepia_medium_high";
                        $("#pickImage").removeClass("sepia_medium");
                        $("#pickImage").removeClass("sepia_high");
                        break;
                    case '4':
                        classToApply = "sepia_high";
                        $("#pickImage").removeClass("sepia_medium_high");
                        break;
                }           
                break;
    
        case 'brightness':
                switch(value){
                    case '0':
                        $("#pickImage").removeClass("brightness_low");
                        break;
                    case '1':
                        classToApply = "brightness_low";
                        $("#pickImage").removeClass("brightness_medium");
                        break;
                    case '2':
                        classToApply = "brightness_medium";
                        $("#pickImage").removeClass("brightness_low");
                        $("#pickImage").removeClass("brightness_medium_high");
                        break;
                    case '3':
                        classToApply = "brightness_medium_high";
                        $("#pickImage").removeClass("brightness_medium");
                        $("#pickImage").removeClass("brightness_high");
                        break;
                    case '4':
                        classToApply = "brightness_high";
                        $("#pickImage").removeClass("brightness_medium_high");
                        break;
                }           
                break;  
    
        case 'contrast':
                switch(value){
                    case '0':
                        $("#pickImage").removeClass("contrast_low");
                        break;
                    case '1':
                        classToApply = "contrast_low";
                        $("#pickImage").removeClass("contrast_medium");
                        break;
                    case '2':
                        classToApply = "contrast_medium";
                        $("#pickImage").removeClass("contrast_low");
                        $("#pickImage").removeClass("contrast_medium_high");
                        break;
                    case '3':
                        classToApply = "contrast_medium_high";
                        $("#pickImage").removeClass("contrast_medium");
                        $("#pickImage").removeClass("contrast_high");
                        break;
                    case '4':
                        classToApply = "contrast_high";
                        $("#pickImage").removeClass("contrast_medium_high");
                        break;
                }           
                break;  
    
        case 'borderRadius':
            switch(value){
                case '0':
                    $("#pickImage").removeClass("borderRadius_low");
                    break;
                case '1':
                    classToApply = "borderRadius_low";
                    $("#pickImage").removeClass("borderRadius_medium");
                    break;
                case '2':
                    classToApply = "borderRadius_medium";
                    $("#pickImage").removeClass("borderRadius_low");
                    $("#pickImage").removeClass("borderRadius_medium_high");
                    break;
                case '3':
                    classToApply = "borderRadius_medium_high";
                    $("#pickImage").removeClass("borderRadius_medium");
                    $("#pickImage").removeClass("borderRadius_high");
                    break;
                case '4':
                    classToApply = "borderRadius_high";
                    $("#pickImage").removeClass("borderRadius_medium_high");
                    break;
            }           
            break;
    
    }           
    
    console.log("Input effect: " + effect + "(" + value + ") -> classToApply: " + classToApply);
    $("#pickImage").addClass(classToApply);
    

    }

    # January 27, 2014 at 6:51 am

    I’ve achieved the effects I work in the simulator which complements the Firefox browser. At issue is that the device did not work either. When I worked itself before grayscale and opacity … In App Manager not working me I like the effects required Gecko with url (…).

    Anybody can tell me why it works in the simulator and not otherwise?

    What if you can help me, code is updated in github: https://github.com/vero1988/CamAppImages

    Thank you.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".