Animations on icons and images not always showing

@Michelle Shull! It is so great to see you again! It has been a while...partially due to me doing a good deal of my own css and partially because I was in Thailand and hanging on the beach a lot :-p

You are the greatest and since I like your support better than Qodes, I am going to go ahead and ask you this question.

I am having an issue with the animations. On the front page there are animated images and icons, you can see about half way down the page under the heading "chiropractic goes beyond the back" that the icons do not animate or show on Safari and they are not showing on the iPhone either. The same issue is happening with animating single images. Darn Qode and there seeming issues with the plugins they tuck into their own theme. I am moving to a framework now because I am over this :-p However, for the site here Qode is what I gots!

The page with the animating single image issue is: http://www.hartfamilychiro.com/about-2/ under the subluxation tab at the bottom of the page.

While you are in there, if this is in the scope of what you do, When I use the element in visual composer that is called "post masonry grid" which is towards the top of the options when you add an element, it does not ever show up on the page. It looks like it wants to load but it is not loading. I guess I am asking if there is some underlying issue that has an easy fix or if I am actually going to have to get in touch with the people over at qode.....

Thank you Michelle! Anything you got will be appreciated. Thank you for help with the slider issue!

Pura Vida,
Mandy

  • Michelle Shull

    Mandy! I would very much like to be on a beach right now. We've got two feet of snow on the ground, and I am so ready for spring flowers.

    Okay, the grid not loading could be a lot of things. That's super tech talk, I know. :wink:

    Looking at your site, you've got some javascript errors due to elements not loading, it looks like it's a particular js file and a couple of CSS files. This shouldn't cause the issue you're seeing, but it may be one of those cascading things where something over here gets a little tweaked, but the issue is only revealed by something way over there actually breaking. You can check these out by looking at your site in Chrome, then right clicking anywhere, hitting "inspect element" (just like for CSS) and then clicking the "console" tab. Do those file names ring a bell?

    As to the animations, we've got a couple of options. One is sloppy and outdated, the other is a bit more complex, so ultimately it's a lesser of two evils thing.

    1. You can try to detect the browser and display a static image for Safari. This is the sloppy and outdated part.
    1a. You CAN do mobile specific CSS to replace the animation with static images for smartphones. That's by screensize, not browser, so it's much less sloppy/outdated, but doesn't address the Safari issue.

    @media screen and (max-width: 300px) {
        your_element {
           your_property: your_parameters;
        }
    }

    2. There's a new(ish) method of ensuring browser compatibility. http://www.robdudley.com/2015/01/16/using-modernizr-to-redirect-old-browsers/. This article is for a specific case, but it explains how Modernizr works. It's super cool. Instead of trying to find the name/version of the browser, it checks what features that particular browser supports, so you can, in theory, utilize it to create pretty specific user experiences based on how many features their browser supports.
    2a: Lots of themeforest themes are packing modernizr in with all the other stuff they throw into a theme, and implementation can be... sketchy. You may want to check the script directories in Qode and see if modernizr.js is already included. If so, disregard all of this, we need to go back to the drawing board.

    Does this help, or did I just make it worse? :wink:

    Take care, Mandy! Always a pleasure to see you.

  • Mandy

    Ok...I am going to have to dig into this further.

    The theme has a setting to prevent animations from working on mobile and that setting is set to not animate on mobile devices so this must be a safari thing.

    I need to mull over what you said and thanks to you, in a great way, I am going to expand my web designing consciousness :slight_smile:

    I will let you know how this goes! It is always great to see you here too! Sorry to hear that you have snow on the ground...we are in the cold again too so the memories of the beach is what keeps me warm until spring and its beautiful colors finally spring. Since the time is changing this weekend I am demanding more warmth...we will see how that goes :wink:

    Take care and thanks for the great support on this!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.