Icon fade-In animation in google chrome

I just fiddled around with this issue an it starts to get even more wired. It is a css issue with

.avia_transform .avia_start_delayed_animation.av_font_icon{
-webkit-animation: avia_appear 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); /* Safari 4+ */
}

If I remove the duration (0.7s) than it works in Chrome as expected and like seen in FF, IE, Safari and Opera. However the effect does not show up on each Chrome installation. I have compared two computers botch running Windows 7 Pro with latest updates and Chrome Version 32.0.1700.107 m. One is a i7 with a Geforec GTX 670 and 3 monitors. The other computer is a notebook with i3 and Geforce GT 640m. The laptop does not show the wired “flicker” in the animation.

Regards

Michael

The issue must be caused by a combination of css classes. I have made some tests.

Isolated (on a simple single test page outside of wordpress) the following css works well on the affected chrome browsers:

.avia_transform .avia_start_delayed_animation.av_font_icon{
	-webkit-animation: avia_appear 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); /* Safari 4+ */
	opacity: 1;
	-moz-transform:scale(1);
}

Removing the duration or setting the y2 value to 1 or less solves the issue in Enfold:

.avia_transform .avia_start_delayed_animation.av_font_icon{
	-webkit-animation: avia_appear 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); /* Safari 4+ */
	opacity: 1;
	-moz-transform:scale(1);
}

or

.avia_transform .avia_start_delayed_animation.av_font_icon{
	-webkit-animation: avia_appear 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1); /* Safari 4+ */
	opacity: 1;
	-moz-transform:scale(1);
}

I guess it is something with .avia_animate_when_visible or .avia_start_delayed_animation.

Regards

Michael

• This reply was modified 10 years, 10 months ago by mensmaximus.

Did you use the WIndows VM? There you can see the issue live.

One more information. On the affected computers Safari displays a smooth animation of the icon as long as y2 of cubic-bezier is 1 ore less. As soon as y2 is above 1 the animation is a 2 step display (from 10% opacity and small icon to 100% opacity and full size icon from one second to the other).

-webkit-animation: avia_appear 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1);
works in Safari and Chrome as expected

-webkit-animation: avia_appear 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
causes issues on the affected computers

Again, this happens only in conjunction with jQuery using setTimeout to add a class (.avia_start_delayed_animation).

I have noticed this effect since 2.5. However since my Chrome updates automatically I cant say whether this flaw would show up with an older release of Enfold and Chrome 32.

And of course this is a browser issue. And as I wrote many times it does not happen with each Chrome installation. Moreover I have provided detailed information which css parameters (duration and y2 coordinate of cubic-bezier) of -webkit-animation help to solve the issue. Together with the Chrome installation I have setup for you on a virtual machine you should be able to locate the issue which is definitely caused by the jQuery function fn.avia_sc_animation_delayed.

Because Safari shows a flaw to this seems to be a general webkit problem. For me this sounds like a reintroduced clipping issue (which has been reported many times for chromium). You can close this ticket as I workaround the issue by overwriting the css declaration. Since I found the workaround my posts where meant to provide you with as much information as possible to either fix the issue with the jQuery function or to file a report with Chrome. However now you and the community know the issue exist and how to fix it.

Regards

Michael