Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS filters in chrome and firefox

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #40830
    domestika
    Member

    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%);
    }

    #114547
    Paulie_D
    Member

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

    The un-prefixed version should ALWAYS be last.

    #114558
    Paulie_D
    Member

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

    #114808
    domestika
    Member

    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!

    #114812
    domestika
    Member

    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.

    #161161
    vero1988
    Participant

    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);
    

    }

    #161200
    vero1988
    Participant

    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 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.