Use Filter CSS in Google Web Designer?

[phang...@gmail.com]

When I use Filter CSS with only -webkit-, it's ok in Google Chrome!

But when I pushish banner ads -----> (support Webkit + Mozilla + No Prefix), Filter CSS only work in Mozilla, not work in Google Chrome ! I dont know why!

Please give me advise! Thanks

[phang...@gmail.com]

This is exanple error:

http://www.mediafire.com/download/ug99hb87oa7b9n6/test-filter.rar

[Google Web Designer beta]

Hi Tuấn,

I have tried previewing your file on the following mobile devices and I can see the CSS filter working in your Ad:

iphone5 (ios 8.1.2) Safari

ipad mini (ios 8.1.3) Safari

Nexus 5 (4.4.4) Chrome(v42) and Firefox(v38)

HTC (5.0.2) Chrome(v40) and Firefox(v38)

It is also working on my Mac desktop in Firefox (v38), Safari (v8.0.6), Opera (v29), but the CSS filter does not work in the animation when previewing in Chrome (v43.0.2357).  

When I look for more info, I found the following about "unprefixed CSS animations" in Chrome (v43):

https://www.chromestatus.com/features/6121990213599232

It said that in Chrome (v43) the unprefixed CSS animation is enabled by default. I suspect that this might be the reason why the CSS filter not working in Chrome for you since your file is published with "Webkit + Mozilla + No Prefix"... I think Chrome (v43) just picked up the "no-prefix" animation in the file, however, Chrome still needs to use the -webkit-filter for CSS Filter so it is causing a conflict and making the CSS filter stops working just in Chrome.

If you publish your file with just "Webkit" option, your Ad should probably work fine in Chrome (v43).

Thanks,

Emily (GWD Team)

 

[Tuấn Anh Phan Gia]

Thanks Emily for your sharing! But is there any way to use CSS filter in the animation for all the lasted version of Firefox , Safari, Opera and Chrome? I tried hack css for 4 this browsers but I can't. If you have some idea. Let me know! Thanks again :))
Now is Saturday! Nice weekend!

[ewschang]

Hi Tuấn,

I think we can try adding the "-webkit-filter" properties into the "no-prefix" animation class. 

Can you take a look at the sample file I have attached here? In my published file I just added the same -webkit-filter in both keyframe animations:

@-webkit-keyframes gwd-gen-qunhgwdanimation_gwd-keyframes {

    0% {

        top: 162px;

        -webkit-animation-timing-function: linear;

        -webkit-filter: blur(0px);

    }

    100% {

        top: 262px;

        -webkit-animation-timing-function: linear;

        -webkit-filter: blur(15px);

    }

}

@keyframes gwd-gen-qunhgwdanimation_gwd-keyframes {

    0% {

        top: 162px;

        animation-timing-function: linear;

        -webkit-filter: blur(0px);

        filter: blur(0px);

    }

    100% {

        top: 262px;

        animation-timing-function: linear;

        -webkit-filter: blur(15px);

        filter: blur(15px);

    }

}

Can you try and let me know if it works for you?

Thanks,

Emily

[Tuấn Anh Phan Gia]

So amazing!! It's work for me, Emily! Many thanks ^O^