Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #224439

    Today I realized the animation sequence of icons has changed in chrome. In opera, internet explorer, safari and firefox icons fade-in smoothly. In chrome the fade-in starts and in the next second it fades out. Then it fades in again like with other browsers. This happens with single icons only not with icon-lists. One of the last updates must have changed that behavior. Can this be fixed?

    #224797

    Hey Michael!

    It is not happening on our end. Can you please post a screenr or something so that we can see it? Did you activate any plugins prior to the issue?

    Regards,
    Ismael

    #224890
    This reply has been marked as private.
    #224911

    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

    #224940

    Update: I found this on the web https://github.com/twbs/bootstrap/issues/10564

    The issue might be related to bootstrap.

    #225087

    Hi!

    Can you post the link to your website and point out the page where this issue occurs so we can take a look?

    Cheers!
    Yigit

    #225138
    This reply has been marked as private.
    #226843

    Hey Michael!

    It seems like you have already figured out and fixed the issue. I have checked your page on Chrome v 32.0.1700.107 m on Win7 and icons display just fine

    Cheers!
    Yigit

    #227106

    No it is not solved. As I already told you the effect shown in the video does not happen with every Chrome installation (newest Version each). I have even reinstalled Chrome to no avail.

    Removing the -webkit-animation-duration from .avia_transform .avia_start_delayed_animation.av_font_icon solves the issue on the affected PC.

    The question is on how many Chrome installations it happens and what causes the issue on this installations. I have tested it on 4 computers (1 PC with Win7, 1 Notebook with Win7, 1 VM with W2k8R2, 1 VM with W2k12). Two show the issue (PC and 1 VM), two dont (Notebook and other VM). Alle machines have the same Chrome version without any extensions.

    It is clear this is not an Enfold only issue. However as it can be resolved with changing the css it must be “half” related to it.

    Regards

    Michael

    #227131

    Hi Michael!

    I tried on my end (Chrome / OS X) but i didn’t see any issue, also the video you posted isn’t displaying (just a green box).

    Best regards,
    Josue

    #227151

    I have converted the video to mov format. Please try again at http://mensmaximus.re/video.zip

    #227165

    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 6 years, 1 month ago by  mensmaximus.
    #227203

    fn.avia_sc_animation_delayed which applies .avia_start_delayed_animation seems to cause the issue. Using Google I could find a lot of issues with setTimeout in Chrome.

    #227206
    This reply has been marked as private.
    #227341

    Hi!

    I watched the video but I can’t seem to reproduce the issue on my end. I did test it on Chrome Windows 8 and 7, both version 32.0.1700.107.

    Best regards, a
    Ismael

    #227342

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

    #227481

    It is definitely caused by fn.avia_sc_animation_delayed. Chrome on Android ignores the delayed start completely and therefore the animation works well. The css code to animate the icon is working well if not combined with jQuery (the delay). Still I have no idea why this happens only on Chrome and only on some computers.

    As for now the only save way is to set the y2 coordinate to 1 (no bubble effect).

    #227493

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

    #227855

    Hey!

    I think this is probably a browser issue and not a theme issue because we didn’t change the animation code. Chrome 32 introduced several new bugs – i.e. one also affects the font files and font icons: http://blog.typekit.com/2014/02/04/chrome-bug-affecting-web-fonts/ and I’m not sure what we can do to fix this on our end. Can you confirm that the animation flaw only pops up with the latest theme version (2.5.2) and not with older theme versions and Chrome 32?

    Cheers!
    Peter

    #227890

    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

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

The topic ‘Icon fade-In animation in google chrome’ is closed to new replies.