Cinch Slideshow 1.6: Displays properly when Previewed, but not when Published to Business Catalyst

Discussion in 'All Other Widgets' started by Keith Crosley, Jan 19, 2017.

  1. Keith Crosley

    Keith Crosley Member

    10
    0
    Hi folks,

    I've reported problems with Cinch for several versions (none of which seem to work properly). Noticed the new 1.6 versions and thought I'd give it a go. (I've literally never had a version of it work properly across the most common browsers, even for extremely simple tests.) This forum post is a copy of message I sent to MuseThemes support this morning -- wondering if anyone else here can confirm what I'm seeing.

    I find that slideshows created with newly released Cinch 1.6 display properly when you do File > Preview page in browser (this is Muse CC 2017, Windows)... Hooray... But find that they *DO NOT* load properly on all browsers when Published to Business Catalyst.

    What I'm seeing is that slideshows operate as expected on Windows desktop browsers (Edge and Chrome) when Previewed out of Muse. However, when published, viewing the page on Windows Edge or Windows Chrome just display the last image in the slideshow, with no functionality at all.

    Oddly, these pages *do* seem to display properly on iOS (Safari iPhone), which I've never been able to get Cinch to do.

    Here is a VERY simple sample page:

    http://www.evillapalmsprings.com/test.html

    (BTW the orange rectangle in the upper right hand on that page is just a self-referential page link. Clicking it reloads the page. I have it there because in previous versions of Cinch I've noticed different behavior in loading/proper functionality depending on how the page was navigated to.)

    Anyway, the slideshow that should be displaying is just 5 960 pixel wide images that are quite small filesize-wise. Again, same page (http://www.evillapalmsprings.com/test.html) viewed on iPhone will display properly.

    I've been trying to use Cinch in my site FOREVER, but there's not been a single version that functions properly on major browsers. :(

    I am using Muse CC 2017 -- latest version -- 2017.0.11, CL 802484 on Windows.

    The attached screenshots show the problem. "Cinch when Previewed in Browser" shows the page when it is Previewed from Muse (note arrows and fact that images are sliding -- it works just fine). However, "Cinch when Published" shows the page after it's been published to my Business Catalyst site (you will note that the last image is simply dumped out on the page with no slideshow functionality at all). This is in Windows Edge browser, but I see same result in Chrome.

    Thanks for any help anyone can provide.

    Best Regards,
    Keith
     

    Attached Files:

  2. Keith Crosley

    Keith Crosley Member

    10
    0
    So, I'm gonna be that guy who responds to his own posts. Resolved this issue with the help of Norman in MuseThemes support.

    The issue I was having (this may or may not have been an issue with previous versions of the Cinch slideshow - hard to tell, as I've done many iterations of testing) relates to the DNS caching/web acceleration service I use for our site. Note that it *wasn't* due to a simple issue related to a script being cached locally or something like that, but to and "advanced" option web acceleration feature.

    I'm going to provide a little more detail than is probably necessary in the hopes that it might help anybody who experiences a similar issue and comes across this post:

    So, I use CloudFlare (http://www.cloudflare.com - a cloud-based service) to manage DNS for our site. It sits "in front" of my Business Catalyst site and caches pages, serves up content from geographically closer copies, etc. I find that, in general, it's super great for speeding up Muse/Biz Catalyst sites and for optimizing code in ways that you can't otherwise do with Muse (since you don't really have access to the "guts" of a Muse page without exporting and editing after the fact -- and that kind of breaks Muse).

    Of course, when doing quick iterations to a site, you sometimes have to ensure that caching is off so that one's changes are fetched, rather than being served up an old version. So CloudFlare has a setting called "Development Mode" that allows one to temporarily turn off caching and I nearly always do this when making edits and testing new stuff. (This wasn't the source of my particular issue, however.)

    CloudFlare also has a variety of cool (and a bit experimental) features that allow it to speed up page delivery (these are accessed under the "Speed" section in CloudFlare). There's an Auto-Minify setting (which I've not run into any problems with) as well as a Beta feature called "Rocket Loader". This one was the source of the problem.

    It turns out that the acceleration features *are not* turned off when in Development Mode and that they operate independently of caching. (I mention this because this is why it took me a while to figure out this problem was coming from CloudFlare.)

    In CloudFlare's words, this is what Rocket Loader does: "Rocket Loader improves page load times by:
    • Decreasing the number of network requests by bundling JavaScript files, even third party resources, to avoid slowing down page rendering
    • Asynchronously loading scripts, including third party scripts, so that they do not block the content of your page from loading immediately
    • Caching scripts locally (using LocalStorage, available on most browsers and smart phones) so they aren't refetched unless necessary"
    So basically it modifies the loading and execution flow of Javascript. In a lot of cases, it works fine with both built-in and third-party Muse Widgets, but I've noticed that in some cases it results in undesirable behavior. I had seen this previously with Rapid Reveal, for example (if Rocket Loader is on, the RR gallery loads really fast, but then redraws again with the correct text styling... so it ends up not really being faster).

    Apparently, Rocket Loader is incompatible with Cinch -- but the symptoms only appear on some browsers (so again, this was hard to troubleshoot).

    So, obviously, this explains why the page looked fine in "browser preview", but not after being published.

    The workaround (for me or for others who may use CloudFlare or similar post-processing hacks to speed up their Muse sites) is to turn that feature off. In CloudFlare, Rocket Loader can be turned off for selected pages using an option called "Page Rules". (Alternatively, you can turn it "off" and use Page Rules to turn it to "automatic" for specific pages.)

    OK, so that's a ton of detail, but here's a quick way to verify if the behavior of a widget is being impacted by some post-processing / DNS caching tool:

    Access the site/page not by its DNS redirected name (e.g., www.evillapalmsprings.com) but by its Business Catalyst URL (e.g., in my case evillapalmprings2.businesscatalyst.com). If the problem "goes away" when accessed by the businesscatalyst.com URL, then the problem is caused by a cloud-based post-processing thingy.

    Hope this might be helpful to someone for future troubleshooting of weird edge-case widget behavior!
     
  3. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,459
    255
    Thank you for the information.
    Dj
     
  4. Keith Crosley

    Keith Crosley Member

    10
    0
    You're welcome, Dj! BTW, I find that Cinch 1.7 finally fixes all of my previously-reported issues across various browsers!

    Hooray!

    -K-
     

Share This Page