When viewing my website on a Chromebook (ASUS Chromebook Flip C302, fully updated), none of the images on the page will load.
https://rouxposter.com (a Shopify store).
When looking in Chrome Console, I'm getting four errors:
Uncaught ReferenceError: jQuery is not defined
Uncaught ReferenceError: _ is not defined
Uncaught ReferenceError: $ is not defined
Uncaught t {_isScalar: false, _subscribe: ƒ}
However, when viewing the site on my other devices (Mac desktop, Android phone), there are no issues at all. Also, when using the Device Toolbar in Console (on Chromebook), most device preview options will make the images render again, and the errors go away.
On my desktop Mac, the site loads perfectly. However, if I use the Device Toolbar and set it to Nest Hub Max (1280 x 800), the site breaks just like on my Chromebook, jQuery doesn't load for some reason and no images are loaded.
Reading up on the errors, it seems that they could all be related to jQuery not loading, or not loading fast enough. I think all images on the site are lazyloaded, so makes sense that they wouldn't work without jQuery.
I've tried moving jQuery immediately below <head>, which changes nothing.
I've tested the site in different browsers and configurations on lambdatest.com, and was able to reproduce the errors and non-loading of images (although I don't remember the exact settings and have now run out of free testing sessions).
Being able to reproduce the error both on desktop and on lambdatest.com, I'm fairly confident the problem is not with my specific Chromebook. In addition, no clearing of caches, going Incognito, or anything else I could think of made the images load (or made jQuery fire correctly) on the Chromebook (save for using Device Toolbar to switch to different emulated screen resolutions).
The issues seems to be somehow related to screen resolution/size. My chromebook runs at 1920 x 1080 px. When using Device Toolbar in Chrome Console, issues seem to be located around 1280 x 800 px.
I've compared the output source code from both states (working and non-working), and the only difference I can see is stuff that looks to be related to jQuery not having loaded in the non-working version.
I can't figure out how screen resolution could affect the loading of jQuery. Are the responsive breakpoints not only in CSS? Could CSS affect loading of jQuery?
I am, of course, worried that some customers are getting this broken version of the site, and this being a Shopify site, I am unsure about how to catch this sort of error (no access to logs).
Any suggestions as to the cause, a remedy, or any other information would be greatly appreciated!
I found the cause of the issue!
My shop uses a javascript for parallax images, and it turns out that the theme developer had set 'defer' incorrectly, just adding <link defer> instead of <link defer="defer">.
This caused the parallax script to run before jQuery was loaded, but only at certain screen aspects, which is why I had such a difficult time reproducing the error.