animated css blur... Is this broken in new Safari 9.0 and Chrome?

[resonant...@gmail.com]

This code used to work, and still does in Firefox, but is ignored in the latest Safari and Chrome.
Any Ideas for a work around?
Thank you!

#page1.gwd-play-animation .gwd-gen-ovr1gwdanimation {
-webkit-animation: gwd-gen-ovr1gwdanimation_gwd-keyframes 2s linear 0s 1 normal forwards;
}
@-webkit-keyframes gwd-gen-ovr1gwdanimation_gwd-keyframes {
0% {
-webkit-filter: blur(10px);
}
100% {
-webkit-filter: blur(0px);
}
}

[Google Web Designer beta]

Hello,

I think with the latest change of browsers, this behavior has been changed.

We will try to fix this issue from GWD side, but in the meanwhile, the published file needs to be modified,

1) Publish the file locally, with Create Zip UNCHECKED, and with Minify UNCHECKED

2) Open the index.html file you published with a Text editor

3) Look for keyframe rule with no prefix as following

@keyframes gwd-gen-vi65gwdanimation_gwd-keyframes {

    0% {

        filter: blur(10px);

        animation-timing-function: linear;

    }

    100% {

         filter: blur(0px);

         animation-timing-function: linear;

    }

4) Add -webkit-filter:blur() in the keyframe rule as following

@keyframes gwd-gen-vi65gwdanimation_gwd-keyframes {

    0% {

filter: blur(10px);

        -webkit-filter: blur(10px);

        animation-timing-function: linear;

    }

    100% {

-webkit-filter: blur(0px);

        filter: blur(0px);

        animation-timing-function: linear;

    }

}

That should solve the problem. I understand this is not easy, but I am only suggesting this to work around the issue.

Could you try to see if it works?

Thanks,

Mariko (GWD team)

[resonant...@gmail.com]

Thanks, I'll try this and let you know.