Have you installed any new apps?
Here is an explanation:
Your theme uses a jQuery library. It's a part of vendor.js asset and is version 2.2.3
It's a popular library and many apps use it too. Some apps use older versions of jQuery, some -- newer.
Nice apps check if there is jQuery loaded and if not -- load their own.
Ideally, it should happen like this:
- Browser starts loading vendor.js
- Browser starts loading Apps JS file
- Browser finishes loading and processesing vendor.js and jQuery is now defined
- App JS is loaded, checks for jQuery and uses the one loaded via vendor.js
However, since modern browsers are able to load multiple files at the same time, it may happen that the order is different:
- Browser starts loading vendor.js
- Browser starts loading App JS file (in parallel)
- App JS is loaded faster, checks for jQuery (not present!) and starts loading it's own
- Browser finishes loading vendor.js, processes it and jQuery is now defined, however
- Now browser finishes loading the Apps copy of jQuery and it loads over the one vendor.js defined
Result -- theme has to use the wrong version of jQuery.
This is what happens when your site is visited on the iPhone as it may be slower than desktop or IOS Safari has different loading strategy.
In your case, instead of jQuery version 2.2.3 theme has to use version 1.9.1 (loaded by Topbar -- but it's not the apps fault!). And they are not fully compatible.
There are several ways to fix this.
The simplest is to ensure that vendor.js is always loaded earlier than apps.
Try this:
- Make theme copy and perform the following on the copy;
- Open theme code for editing and find a theme.liquid in Layout folder;
- Search this file for line which mentions vendor.js (or vendor.min.js)
It should look similar to
<script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>
4. Remove the defer="defer" from both lines
5. Save and try your modified theme in preview.
The attribute instructs browsers to load this JS file later and is one of the reasons while loading sequence may be off.
By removing the attribute we instruct browser to load it immediately -- this may make it a bit less efficient, but we really want to ensure that it loads early.
It may be enough to remove it from vendor.js line only, but I'd recommend removing it from both just in case.
Finally, this may still not fix it -- I've seen Apps which are not nice and simply load their own copy of jQuery regardless -- this may need further investigation.
Hopefully in your case it would be enough.
If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.I can be reached via e-mail
tairli@yahoo.com
