WOW Javascript & Fonts Awesome link Not selectable on Android Phone

I have social links in my site's footer that uses Fonts Awesome & WOW-MIN.js. It works fine on desktop but Android phone will not select or click links.

Actually the WOW animation doesn't seem to be correct either. They are set to FlipInX but it simply highlights the Fonts Awesome Icon. I uploaded the latest animation library but it doesn't seem to make a difference.

Android phone displays the links properly so this is likely an issue with WOW. Is there a way to make this work on Android phones?

Should I just drop WOW for Fonts Awesome icons?
LVL 30
Randy DownsOWNERAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

lenamtlCommented:
Which browser are you using?
Seems to work fine with Chrome

For font awesome there are known issues with Opera
check this solution:
http://stackoverflow.com/questions/15028602/font-awesome-icons-are-not-working-in-some-browsers/15256010#15256010

for the animation:
It's seems that missing -webkit prefix cause issue too:
https://github.com/daneden/animate.css/pull/328

and see here for another possible solution:
https://github.com/daneden/animate.css/issues/285
0
Randy DownsOWNERAuthor Commented:
I am not seeing the animation in Chrome on the desktop. Android phone can't click the icons. Do I need to add webkit to the site?

I'm not terribly worried about Opera & Safari users since it has such a small share of the browsers.
0
lenamtlCommented:
You can try to add webkit to the css
see the diff
https://github.com/daneden/animate.css/pull/328/files
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Randy DownsOWNERAuthor Commented:
I don't see a way to download the old animate.css from GitHub. I have the same version they have in the download package. Should I add the differences manually?

There are a lot of files I don't use in the zip file. See attached screenshot. Should I be using something more than this:

<link rel="stylesheet" href="css/animate.css">

Open in new window

0
joinaunionCommented:
Have you tried adding webview yet?
http://developer.android.com/guide/webapps/webview.html
0
Randy DownsOWNERAuthor Commented:
@ joinaunion, How I would add webview to the webpage's javascript ?

Wow is the animation & fa is fonts awesome. I don't see the proper animation in desktop either.

Here's the code I am running:

                     <li class="wow flipInX" data-wow-duration="2s" data-wow-delay=".5s"><a href="https://twitter.com/DownsNumber" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i></a></li>

Open in new window

0
lenamtlCommented:
Hi,
sorry for the delay

for WOW:
you need to update only the css file of WOW.
What I suggest you is to take your actual wow css file the add manually the missing -webkit prefix to the class most of them will be on the example I gave you maybe one or too will be missing we will help you if this happen.

You can use Notepad++ to edit the css file:
http://notepad-plus-plus.org/


For Font Awesome I suggest you to install the font locally and not using the cdn.
So instead of using
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Open in new window

You download the font awesome package unzip it in your www or htdocs folder
then add the link to it. Usually it fix the problem and the browser use the appropriate font version.
Make sur ethe path is ok.
<!-- Awesome fonts -->
	<link rel="stylesheet" href="font-awesome/css/font-awesome.css" type="text/css" />
<!--[if IE 7]>
    <link rel="stylesheet" href="font-awesome/css/font-awesome-ie7.min.css">
<![endif]-->

Open in new window

0
Randy DownsOWNERAuthor Commented:
I downloaded and linked to the local CSS for fonts-awesome & they continue to display properly. Didn't seem to effect animation but I am pretty sure that's a WOW issue.

I don't see webkit for the flipInX class in the GitHub difference.

It doesn't look like webkit was removed for flipInX class
@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
    -ms-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

Open in new window

0
Randy DownsOWNERAuthor Commented:
I setup a demo page to try some animations.

class="animated infinite bounce" works
class="wow infinite bounce" doesn't work

Duration class doesn't seem to have any impact - data-wow-duration="200s"

Android doesn't seem to like the mixture of animate & fonts-awesome.
0
lenamtlCommented:
Yes the webkit is already there for flipInX.

I checked your demo, there is no css link in the head for WOW.
Just add the link to wow css file.
Your wow animation doesn't work on PC view at the moment.
0
Randy DownsOWNERAuthor Commented:
I had pretty much given up on WOW. Animate seems to work well enough for animation. I had removed the wow js that was in the end of the code but it's back now but won't animate. I emailed WOW author - MATTHIEU AUSSAGUEL.

 css link for wow

    <link href="css/animate.css-master/animate.css-master/animate.min.css" rel="stylesheet" type="text/css">

Open in new window


The js was buried in the end but it didn't seem to matter if I use the js in the head or not. I also removed all other js to no avail in a previous test.
0
lenamtlCommented:
I think I got confuse between wow and animate script.

Because your first link for WOW was http://daneden.github.io/animate.css/
instead of https://github.com/matthieua/WOW

Now it is more clear to me.

So the wow.js is using animate.css

In your demo where do you init the script

<script>
 wow = new WOW(
    {
      boxClass:     'wow',      // default
      animateClass: 'animated', // default
      offset:       0,          // default
      mobile:       true,       // default
      live:         true        // default
    }
  )
  wow.init();
</script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Randy DownsOWNERAuthor Commented:
i didn't think that the init was necessary for the simple animations. I added it to the page but still doesn't seem to work. Is there a significant improvement in using wow over animated?

I am not seeing errors in Chrome console (CTRL Shift J).
0
Randy DownsOWNERAuthor Commented:
It looks like some of the confusion is two different libraries called animate.css
0
Randy DownsOWNERAuthor Commented:
I added separate css for wow (animate still defined - conflict maybe?).

<script>
 wow = new WOW(
    {
      boxClass:     'wow',      // default
      animateClass: 'animated', // default
      offset:       0,          // default
      mobile:       true,       // default
      live:         true        // default
    }
  )
  wow.init();
</script>  

Open in new window

0
Randy DownsOWNERAuthor Commented:
This page has nothing but wow version of animate.css but still no love.

It looks like that the WOW js uses the same animate.css since it's linked here.
Choose the animation style

Pick an animation style in Animate.css , then add the CSS class to the HTML element
0
joinaunionCommented:
0
Randy DownsOWNERAuthor Commented:
@joinaunion, those all are geared towards developing an app. While the concept appeals to me I don't foresee users downloading an app. Anyway to utilize webview on a webpage?
0
Randy DownsOWNERAuthor Commented:
I should note that the website I am creating is responsive (Bootstrap 3).
0
joinaunionCommented:
0
Randy DownsOWNERAuthor Commented:
@joinaunion As I understand it I would have to make my webpage an app to use webview. That's not really my goal here but I do like the concept.
0
Randy DownsOWNERAuthor Commented:
OK this finally works.   I found that the wow.min.js was different on his page than the one on GitHub.

I appreciate all the help.
0
Randy DownsOWNERAuthor Commented:
Lots of good feedback but the fix was to use the same js the author had on his page rather than the one on GitHub.

lenamtl pointed out the inconsistencies between posts which got me on the right track.

Thanks to all.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.