[carmine_dichiaraParticipant]

Hello,

Having some difficulty with animations on Chrome & Opera on iOS 9, wanted to both run it past you to see if I made a mistake & get an article in the forum for folks who might be having the same difficulty.

Seems like the column fade in effects and ticker effects don’t display on Chrome & Opera for iOS until the user stops scrolling completely (ie lifts their finger & the page is stationary).

http://www.irewardhealth.com
Wordpress 4.3.1
X-Theme 4.1.0

Searching the web, I think this is related to the browsers’ use of UIWebView instead of WKWebView…
http://stackoverflow.com/questions/28609014/wow-js-animation-on-mobile-chrome-triggers-only-on-stop-scrolling
https://code.google.com/p/chromium/issues/detail?id=423444

What do you folks think? Unfortunately it appears that there is no great hurry for Chrome to migrate to WKWebView.

I was wondering if you have any advice for workarounds for now … I can turn off fade in effects universally, but I’d love to just turn them off for the related browsers. The ticker effect is more problematic because it’ll take me a while to reproduce the layout minus the animation. But if I don’t do it the website appears blank & poorly-made.

Thanks,

Carmine

[Rue NelModerator]

Hello Carmine,

Thank you for posting in!
All the fade effects are driven by touch events. It is triggered as soon as you stop swiping on your mobile screen. Disabling it for a specific browser would be impossible. Well, it might be possible but you have to recode the whole JS file the handles the fade in effects. For now, the best thing to do is by not using the fade effects.

Thank you.

[carmine_dichiaraParticipant]

Hi,

Thanks for responding. Just for completeness, for other people reading this later … I think it’s more accurate to say that, for the moment, all JavaScript activity is halted on at least some of the non-Safari iOS browsers when you have 1) initiated a scroll with your finger and 2) have not yet ended the scroll by lifting your finger. What I believe that means, based on observations, is that at least 1) Revolution Slider animations, 2) Column Fade in animations, and 3) Ticker animations are frozen until you lift your finger.

Too bad about the browser-specific code. OK, thanks!

Carmine

[ZeshanMember]

Hi Carmine,

Revolution Slider is a 3rd party plugin so I cannot guarantee how it handles scrolling on mobile devices. However, as we are using scroll event for fade in animations, in iOS, it doesn’t fire when user starts dragging, it immediately fires when user stops dragging. This is more a limitation by iOS for scroll event. I’ll however forward it to our developers for further investigation.

Thank you!

[Author]

Posts