Jetpack Infinite scroll on mobile

I see a Javascript Error when browsing your site on Mobile, and that seems to break Infinite Scroll, but I’m sure what’s causing the error:
https://i.wpne.ws/Y1Is

I also couldn’t reproduce the problem on my test site, even when using the Twenty Fourteen theme.

Even 1 widget added on sidebar breaks it.

Does that happen with just any widget, or with a specific one?

The standard mobile theme (via Jetpack) also does not do Infinite Scroll on mobile.

That’s correct. Jetpack’s Mobile Theme doesn’t include Infinite Scroll support.

Removed all plugins except

• Akismet
• Jetpack
• Wordfence

Removed all widgets, starts to work.

Tried widgets one by one
Added Archives widget to Primary Sidebar – Stops working
Recent Posts/Categories/Tag Cloud/Blog Subscriptions (Jetpack) – Same thing

No widgets – Starts to work again.

Removed Twenty Fourteen and reinstalled. Still Infinite Scroll doesn’t work.

Did a clean install of WordPress (hoping to resolve all issues whatsoever). Only had 3 plugins activated (actually installed only 3)

• Jetpack
• PollDaddy
• WordPress Importer
• Akismet

Default set of plugins (Recent Posts, Recent Comments, Archives, Categories & Meta). No luck for me.

I used Twenty Thirteen and installed all plugins used earlier and the widgets too. Seems to be working till now.

Switched to Twenty Fourteen and it stopped again. (It’s not mobile cache as the amount of refresh done, should be cleared by now).

Activated Twenty Thirteen, it works again…

Sorry for being verbose. I’m logging my steps so someone else doesn’t have to follow it.

Weird. Thanks for the detailed steps, that’s helpful! I ran some tests using the exact same settings as yours, and while I couldn’t reproduce the problem with Jetpack 3.1.1 I found an issue with our latest beta. We’ll get this fixed, but that won’t help you I’m afraid.

Do you any caching or concatenation service on your site, that may cause issues similar to the one I found in our Beta version?

Thanks Jeremy for being patient and helpful.
I’m not sure if there is some caching done by the service but I do have Falcon caching thing installed (provided by Wordfence).
The below is the plugins currently active on my page.

• Akismet
• Bulk Actions Select All
• Easy FancyBox
• Flickr Photostream
• Google XML Sitemaps
• Jetpack by WordPress.com
• Polldaddy Polls & Ratings
• Wordfence Security
• WordPress Database Backup
• WordPress Importer
• wp-flickr-press

I’ve not listed inactive ones as I think, they will not be impacting if they are inactive unless install replaces some files in theme – which is unlikely. I’ve come to 2 major points in this discussion:

1. Twenty Thirteen is working with same setting but not Twenty Fourteen. So it could be the theme has some setting which is conflicting (a jquery conflict for versions?)
2. Twenty Fourteen is sensible

The 2nd point may not be true but I’m reaching to point where infinite scroll in mobile should actually not work for blogs with responsive theme and widgets which rearrange to bottom of screen. As the widgets resize to bottom of screen and then Jetpack Infinite scrolls, then there is no point of widgets and they could hardly be used until you scroll pages (& pages & pages till end). If the issue is a bug, it’s quite sensible one. But then how its working for you? :-/

infinite scroll in mobile should actually not work for blogs with responsive theme and widgets which rearrange to bottom of screen.

Infinite Scroll was built to handle such cases. If you use Footer Widgets, Infinite Scroll goes from scroll (where posts appear as you scroll down the page) to click (where you have to click a button to load more posts. This way, if you want to see Footer Widgets you can just keep scrolling without clicking to load more posts.

Could you try disabling Falcon caching, and let me know how it goes?

I disabled the Falcon caching. Cleared History and Website data from Settings. Still Infinite Scroll does not work on mobile (Chrome & Safari) but is fine on computer browser (tried Firefox, Chrome & Safari).

Screenshot

I can’t really check how things look like on your site at the moment since you’ve enabled Jetpack’s Mobile Theme. But the screenshot you’ve sent me looks good. Infinite Scroll should be triggered when you click on “Older Posts”.

What happens when you do?

I’ve deactivated the Jetpack Mobile Theme. I clicked the “Older Posts” link, the next page is fetched.
Clicked

After scrolling, I can see another “Older Posts”again
Older Posts after scrolling

I switched to Twenty Thirteen Theme, in which there was no “Older Posts” button, Jetpack was hiding it and triggering Infinite Scroll as expected.
Infinite Scroll, Twenty Thirteen

That’s the expected behaviour, and the difference between scroll and click, as I mentioned earlier. Twenty Thirteen does not include a Footer Widget, so Infinite Scroll is just triggered when you scroll down the page. Twenty Fourteen, however, does include a Footer Widget. Infinite Scroll consequently waits for you to decide if you want to see the footer widgets, or if you want to see more posts (by clicking on “Older Posts”.

Does that make sense?

It all makes sense now. This is really something to do with theme implementation. It’s neither Twenty Fourteen nor Jetpack, it’s a usability feature for responsive themes to act this way. If widgets in footer are not showed then there is no point of having them. So Jetpack gives power to users to select to either view or click to scroll infinitely.

Thanks Jeremy for being patient with this and explaining it so simply.

Very Nice Plugin….
It really works fine…
Configured on this website…
https://zendenwallpaper.com.au/shop/

Just change the Infinite scroll plugin next selector value to
.woo-pagination a.next
if using on woocommerce pages….
Other settings are really simple