ScrollReveal not working on iOS Chrome [solved v3.0.6]

[jmalatia]

Sample site https://scrollrevealjs.org/ not working on iOS Chrome. iPhone or iPad iOS 9+.

[jlmakes]

It seems that el.getClientBoundingRect() is unsuitable (re: #193) and I’m suspicious this issue may be related. I will be debugging Chrome on iOS, hopefully to roll out with the fix for #193 on Monday.

Thanks @jmalatia 🙇

[jlmakes]

It appears to be working.

Note: Chrome on iOS however, does still pause animations during scroll. This behavior can be seen on many mobile browsers, as scroll event handling is postponed until the client has stopped scrolling. Mobile Safari only recently changed to support event handling during scroll as of iOS 8.

[jmalatia]

I just tried it again after updating to v3.0.3 and it is still not working for me on multiple iOS devices using Chrome (current updated versions of the app and iOS).

Not working both in my own project and on the sample site https://scrollrevealjs.org/

[jlmakes]

Hmm, @jmalatia it's not working for me either now… bah, okay I will look into this again. (I need a good way to debug mobile browsers!)

[ghost]

how about compatibility of V2.x in mobile browsers?

[jlmakes]

@blackSnail Version 2 appears to work fine in Chrome: https://scrollrevealjs.org/legacy

Which is actually confusing, since the core logic is strikingly similar. I just need a remote inspector to look through the ScrollReveal instance and any errors to figure out why Version 3 isn’t working properly in iOS Chrome. (I’m looking into setting up weinre)

[jlmakes]

@jmalatia Sometimes when it loads, it works… but most times it seems not to. This is such a confusing bug! I’m trying to use weinre to debug it remotely, but I haven’t been able to connect to phone to my local network…

v3 also seems to fail on Windows Phone in my tests, but v2 does not. I don’t know where v3 differs so greatly in behavioral logic that it breaks!

@AyanGhatak If you could help out with this, it would be awesome!

[jlmakes]

@jmalatia @blackSnail It seems the event throttling flag being outside requestAnimationFrame was causing this problem 😩

ScrollReveal.prototype.handler = function( event ) {
  if ( !sr.blocked ) {
-    sr.blocked = true;
-    _requestAnimationFrame( sr.animate );
+    _requestAnimationFrame(function(){
+      sr.blocked = true;
+      sr.animate();
+    });
  }
};

Had to debug the old fashioned way—trial and error, save to server and refresh—but the latest master has this change and soon I will include this in the next release. I’m still looking into #208, as I believe Windows Phone to be broken in v3.x.x where v2.x.x is not.

Phew! 🙇

[AyanGhatak]

Hey @jlmakes

Things still don't work in the same manner as iOS Chrome and mobile Safari, even after making the changes you suggested in 4b10dea. @jmalatia @blackSnail Correct me if I am wrong!

Let me rephrase the exact issue we are facing...

Things don't animate until the scrolling part is done in iOS Chrome. Whereas in mobile Safari we find animations occur during scrolling.

In iOS Chrome, the scroll event is fired at the end of the scrolling. So unless the full scrolling is completed, the callback for the event( type, handler ) is not invoked. Since the release of iOS 8 mobile Safari fixed the scroll event issue, but Chrome for iOS and Android still only fires the scroll event at the moment the drag stops. Another Reference

Partial Workaround?

What I saw instead of scroll event, if we used touchmove in mobile devices and it was good. the handler callback was getting called. But....

There is again another bug for iOS Chrome: _requestAnimationFrame( callback ). The callback is also called at a delayed time. In mobile Safari, the callback is invoked immediately. The Pollyfill has not help much yet.

The workaround are the temporary findings and needs thorough validations.

[jlmakes]

The bug this issue originally referenced was in reference to reveals not occurring at all within iOS chrome after the initial load.

✨ 🚑 This has been fixed in v3.0.6 ✨

Thanks for taking the time @AyanGhatak.

What you’re talking about is a long standing behavior of mobile browsers (#48 #101) and scroll event handling. As I understand, iOS 8 was the first browser that evolved to trigger scroll events during scrolling.

The behavior you describe—where scroll events don’t fire until scrolling is complete—is not a bug with ScrollReveal, but a limitation of some mobile browsers.

For example, this was posted in 2012: On-Scroll Event Issues on Mobile Browsers

Relevant Excerpt:

Workaround Attempt 2 - Use Touch Events
One consistent issue with this approach is that the ontouchmove event is only fired when the user’s finger remains on the screen. Meaning, if the user gives any momentum to the scroll, ontouchmove events will not be fired while the window is scrolling and their finger is not on the screen.

I don’t recall this, but it seems I attempted something similar in an earlier release (#48) but the browser still paused painting during touchmove apparently. If you have a strategy for overcoming this that performs well without adding too much code to the source, I would be happy to explore the code! 🙇

[walkandre]

I hate to do this but I'm still seeing the problem with version v3.0.8 on ios 9.2 / chrome.

[jlmakes]

@walkandre there was an issue when checking CSS support with patch 8. Please update to v3.0.9.

[jmalatia]

I should have responded before, my bad. @jlmakes I updated my project after you released v3.0.6 and tested with the revised version and it worked great! Thanks for the speedy fix and keeping us updated during the process... much appreciated!

@walkandre, I just updated my project to v3.0.9 and tested in ios chrome and it is working correctly. (Not sure about v3.0.8.)

One thing I have noticed when testing on iOS (either Safari or Chrome) is that when things start to act weird (especially with pages that have animations or transitions that I have refreshed the page a lot on), I close all open web browser windows and then go back to the main iOS home screen and double-click the home button and throw up Safari and/or Chrome to release them from memory and then reopen the app and try again—then usually I get what is expected and the bad/weird behavior is gone.

[jlmakes]

My pleasure @jmalatia, thanks for helping out! 🙇

By the way, thanks for searching and commenting on an existing issue @walkandre!

[walkandre]

@jlmakes thanks for the awesome library! btw you should take a look here: https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging?hl=en the link explains how to remote debug ios and android devices. it's pretty handy.

[romainpoirier]

Probably a related issue, but after testing the demo website using BrowserStack, I can confirm it doesn't work under Safari 10.1 (included, and older versions). This Safari version is still widely used on some older Macs.