Plugin seems to interfere with parallax image below

I’ve realised the ‘grey’ box is actually still white, but it is due to the darkened overlay I have on the parallax image. The plugin does seem to be interfering with the parallax image below though, so I would appreciate your support. Thanks.

Just another update – switching off the parallax does remove the issue, so it is something to do with the way the parallax effect interacts with the plugin. Thanks

Hey @jgolding94

Thank you for reaching out to us for assistance. Looking into your issue here, I was unable to observe any issue on my side using different browsers. It seems to be related to some JS optimization that you have on your website, causing a conflict with the scripts that have been minified. You can test enable the following option by going to your WordPress Dashboard > Instagram Feed > Customize > Advanced > Misc > Load initial posts with AJAX > then Save Changes. And if possible, can you disable any plugins that might optimize JavaScript and see if it fixes the problem? If it does make the feed work, you will need to look over these optimization rules and if possible add an exception for our plugin files under /wp-content/plugins/instagram-feed/js/ and /wp-content/plugins/instagram-feed/css/.

Hope this helps! Let me know if you need any further guidance.

Best regards.`

• This reply was modified 3 years, 3 months ago by Smash Balloon Paola.

Hi @paolahorta!

Thanks so much for your reply. Basically, I think the reason why you couldn’t observe the issue was because I had actually switched the parallax scrolling of that image off. I have switched it on again now, so you should be able to see what I mean, if you navigate to the web page.

I have followed your advice. Basically, I use the Autoptimize plugin on the site. I tried switching off javascript optimisation altogether and (separately) leaving the optimisation on, but adding the file paths you mentioned to the exclusion lists on the plugin. However, I am still seeing the same weird parallax scrolling interference issue. It’s only there when the images are loaded.

Could you maybe take a look now, whilst I have the parallax switched on, so that you might better be able to understand what is happening?

Thanks, looking forward to hearing back soon!

Hey @jgolding94,

Thank you for enabling it again, we are able to see the issue now. The issue here is that our plugin will load and then resize the images ‘after’ the page has loaded. The theme here is determining the position of the parallax image during load – set from the ‘top’. When our plugin finished loading, it changes the structure of the website, causing this issue. What we can do here is add a script to our plugin’s custom JavaScript that should fix the issue. Please go to Instagram Feed > Customize > Custom JavaScript and add the following:

setTimeout(function() {
  var resizeEvent = window.document.createEvent('UIEvents'); 
  resizeEvent .initUIEvent('resize', true, false, window, 0); 
  window.dispatchEvent(resizeEvent);
},500);

This should resolve the issue – it did so in my testing. Let us know if you have further issues.

Best regards.

Thanks so much! What you’ve said really does make sense, although I have just implemented that code as you pasted it, in Instagram Feed > Customize > Custom JavaScript and as far as I can see, the issue is still appearing. If you could take a look at the site again, do you still see the issue? I have actually cleared the cache as well, to see if that would help, but it appears to persist. Perhaps I need to add something else to the custom JS code box? Thanks again!

Hey @jgolding94,

I would suggest you increase the timeout in the last part of the script, to 1000. Like so:

setTimeout(function() {
  var resizeEvent = window.document.createEvent('UIEvents'); 
  resizeEvent .initUIEvent('resize', true, false, window, 0); 
  window.dispatchEvent(resizeEvent);
},1000);

If it didn’t resolve the problem, then could you open a support ticket here with your “System Info” from the “Support” tab inside the plugin settings? Then one of our support team can further troubleshoot it for you!

Best regards,

Hi @paolahorta,

I think your suggestion of increasing the timeout has worked, or at least it has on my computer. Please could you just check that for me, to see if the error has been resolved on your end also?

If it has, then I would be happy to mark the issue as resolved. ??

Thanks so much again for your help.

Hey @jgolding94,

Just checking in here to see that from my end, the issue has been resolved. The Parallax works without any ‘grey box’ and the Instagram Feed plugin is also working. Feel free to mark this as resolved. Let us know should you have any other issues in the future.

Many thanks and I wish you a great day ahead.

Hi @joelsmashballoon

That’s amazing, thanks. I really appreciate your help and feedback. Hopefully there won’t be a recurrence but I will be in touch if there are any issues in the future. I’ll mark it as resolved now.

Thanks, you too!