Cubic: Not working in Safari 9 and on on Chrome in older versions of macOS & iOS

The Cubic theme appears to not be loading in Safari 9 and below on mobile devices and desktop/laptop. This doesn't appear to be directly related to known Ads issues as ads are not enabled in examples I encountered.

Cubic theme's preload script and built-in infinite scroll both seem to get stuck on older browsers and even newer browsers on older versions of macOS.

Found that we can force the site and infinite scroll opacity to bypass it -- it's wasn't needed for the sites I was working on as they weren't using the theme for loading lots of images.

Note that it seems some of this wouldn't be required if we could completely toggle off infinite scroll on this theme. Even with it off, infinite scroll still is loaded and the theme uses the infinite scroll button to load more posts even though pagination buttons are in the theme -- just hidden.

Steps to replicate

• Create a site using Cubic or use the demo at https://cubicdemo.wordpress.com/
• Use an older device + browser (such as those available on browserstack.com). Easy to reproduce on macOS El Capitan or iPhone 6S Plus and iPad Air 2 as these devices and OSs use an older version of Safari.
• Attempt to load the site using Safari 9 or earlier

Result

• Blank screen
• Various errors in the console

Expected

• To load properly.

• Follow-up ticket: #2555114-zen

Workaround

May not be applicable for users with lots of images that may need the preloader and built-in infinite scroll but the following CSS worked for the case I encountered. One could pair these with some conditional browser selector hacks to only target Safari 9.

/* Cubic Theme - Force site to display and bypass preload for older browser compatibility */
.site {
    opacity: 1 !important;
}

/* Force Infinite Scroll to Disable for Older Browser compatibility */
.infinite-scroll.archive .hentry, 
.infinite-scroll.blog .hentry, 
.infinite-scroll.search-results .hentry {
    opacity: 1 !important;
}

Workaround Continued

The theme doesn't have options for fully disabling infinite scroll and restoring pagination buttons.

The buttons are in the code, however. After working with this user some more, we found that they couldn't load the "load more" arrow button.

The following CSS was provided as a workaround -- disabling the infinite scroll button and restoring pagination.

/* Disable Forced Infinite Scroll for Browser Compatibility and Display Pagination Buttons */
.infinite-scroll .paging-navigation {
    display: block;
}

#infinite-handle {
	display: none;
}

Triaging old issues - and owndering how relevant this issue still is with current browser share for Safari 9 and lower (and older Chrome)?