Elementor

Elementor popup and motion objects stopped working

Some day I just realize that some Elementor objects stopped working, they were working beautifully before but not anymore. I started a blind investigation because when you have some problem in WordPress it can be caused for many reasons.

Elementor objects stopped working

A popup and some objects with Motion Effects was working before, but now stopped working, The first “strange thing” that I found was a popup that was not opening anymore, when I try to understand the error someone make a report that some buttons was not being showed anymore.

When something comes out of the blue, you primary think about updates, and we have had many updates last weeks, many plugins, the template and also WordPress 5.5, so we had many suspects.

I decided to dig into the javascript code, in the console I saw a log who indicates that the problem was related to jQuery, I look for other evidences than I realize that all no showed buttons have Motion Effects, and of course the popup also has some motion so more than just a similarity, indicates that both use jQuery to move objects.

The solution

The solution was obvious, put jQuery back at work or actually discover why jQuery was not loaded before Elementor JS files, according to the console log error. Reading the code I saw that jQuery was been loaded with DEFER attribute, which  specifies that the script is executed when the page has finished parsing., e.g.
<script src=”demo_defer.js” defer></script> read more

I’ve got one more step on my investigation but now the question is “what is causing this?” Who are making jQuery been loaded with DEFER attribute. Before goes further with the problem, I think that I could apply some work around and put the website back on track. I’m not proud of it, this UGLY solution (it’s not a solution, only a work around) was load jQuery before Elementor files. I’m ashamed to assume this in public, but throws the first rock who never did some stupid solution to keep the website online, Then I hard loaded jQuery into the header.js of the the template.

Suspects above suspicion

At this point the main suspicious was Astra Template and the second one was the new version of WordPress (5.5), but there are thousands of people using Astra template and millions using the new version of WordPress, it was glorious to find a big issue like this in some of these guys, so it’s better start the investigation with the plugins.

Guilty as charged

In the end I found that the problem was caused by SG Optimizer plugin, but actually the problem was caused by me, when a couple of weeks before I decided to configure a cache into the SiteGround host, so I found that they have a WordPress plugin to manage it, so I just install the plugin, activate it, make a quick configuration reading everything very quickly and BOOMMM, put it online with few incomplete tests because we are working hard deploying a new feature in the website so I thought that we were making enough tests that “should” include any scenario, but I was wrong.

I home my hard experience helps you to find a solution for your problem, or at least to make you remember that you DO have to test everything, always when you are online in production.