Page Load Interaction not working in Safari or Explorer

Design help Custom code
1

This issue appears to be something happening outside of Webflow, but I thought I would put it out there to see if anyone else has experienced similar issues.

On the homepage of this site, I have a page load interaction (legacy) that makes the main slider fade in from 0% opacity to 100% opacity. All works well in my Webflow published site. I handed the packaged site over to my developer (using Drupal backend) and this same interaction sticks at the 0% opacity initial appearance, but only in Safari and Explorer Edge browsers. Both browsers act normally once I refresh the page or click the home button. When I inspect the page, nothing appears differently in the code that would make the interaction stall upon first load. I can understand Explorer having some bugginess but never had an issue with Safari. And strange that both browsers have the exact same response.

I should also mention that there are similar page scroll interactions (legacy) further down the page, where large images transition from 0% opacity to 100% opacity upon scrolling into view. Those remain at 0% as well, until I refresh the page. Again, only in Safari and Explorer.

This is my Designer link:
https://preview.webflow.com/preview/lamodernliving2?preview=5f6605535785f80aa450e24de2a0acaa

This is the webflow published link:
http://lamodernliving2.webflow.io/

This is the Drupal integrated live site:

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi @Port_of_Folio, integrations like that can be tricky, but I can help to share at least a couple of observations on differences between the drupal site and the webflow.io site.

  1. The Webflow.io site is loading the jQuery and website js at the end of the body element, after the initial page elements have finished loading.

06%20AM
06%20AM2966×752 505 KB

On the Drupal site, the jQuery is being run from the head of the site, I would recommend to run those before the Body if possible.

It might be those elements may not exist yet if the Webflow.js init code is running before those elements with interactions are created on the page. It is one thing to check.

  1. The version of jQuery used is 2.2.0 on the exported drupal site, the webflow.io site is using jQuery 3.3.1. Take a peek here: Webflow sites will be published using jQuery version 3.3.1 starting in March 2018

I hope this gives you a direction to look in. Webflow does not typically provide support for custom integrations, but always happy to take a look here in the code help pages.

3

Thanks cyberdave, we’ll give these a try and report back.