wow.js animation on mobile chrome triggers only on stop scrolling

Question

I´m using wow.js with animate.css for showing some effects on scrolling. On desktop and mobile safari all works nice but not on mobile chrome. I think chrome does render the scrolling different?

When I scroll down, the content blocks should appear with a fade effect. But instead, it appears only if the scrolling has completely stopped. In mobile Safari the effect shows up, when the block is entering the viewport. This is correct.

Is there any workaround for showing the animations on mobile chrome like on mobile safari?

Do you have a fiddle, snippet, or live site where we can see the behavior? — hopkins-matt, Feb 22 '15 at 16:42
http://preview.rotecswiss.ch/de/ try this on mobile chrome (iPad or iPhone) — m1crdy, Feb 23 '15 at 10:10
Just tested on iPhone 6 Safari and Chrome. Looks exactly the same on both. What exactly is the problem you're experiencing? — CaribouCode, Feb 23 '15 at 21:24
@Coop enabled animations on mobile again. Please have a look now. — m1crdy, Feb 24 '15 at 08:57

score 5 · Accepted Answer · edited May 23 '17 at 12:25

5

Everything looked the same in Safari and Chrome on iPhone 6, but it looks like you have mobile animations turned off. Try this.

JS:

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

Update: Please see stackoverflow.com/a/27574822/4556503. That answer explains the difference in iOS scroll events. Apple made changes in the way iOS 8 handles scroll events, but Chrome on iOS is still using UIWebview instead of the newer WKWebView to render pages. Your issue will most likely be resolved once Google updates Chrome for iOS to WKWebView.

edited May 23 '17 at 12:25

Community

1
1

answered Feb 23 '15 at 21:30

hopkins-matt

2,763
2
15
23

Thanks for your answer. I disabled mobile animations. I have enabled them again. So please check again on chrome on your iphone. Ty. – m1crdy Feb 24 '15 at 08:48
@m1crdy please see http://stackoverflow.com/a/27574822/4556503. That answer explains the difference in iOS scroll events. Apple made changes in the way iOS 8 handles scroll events, but Chrome on iOS is still using UIWebview instead of the newer WKWebView to render pages. Your issue will most likely be resolved once Google updates Chrome for iOS to WKWebView. – hopkins-matt Feb 24 '15 at 16:42
Please paste your comment as answer. Gonna give you the bounty then ;) – m1crdy Feb 25 '15 at 12:17
I went ahead and pasted it into my answer. Thanks and sorry I could be of more help. – hopkins-matt Feb 25 '15 at 16:18

score 0 · Answer 2 · answered Apr 25 '17 at 19:06

0

For me, the solution was taking out

body {
   overflow-x:hidden;
}

from my mobile css.

answered Apr 25 '17 at 19:06

LauraNMS

2,720
7
39
73

wow.js animation on mobile chrome triggers only on stop scrolling

2 Answers2