Hi Jason 👋
Two things that spring to mind first are;
- Do you wait for images to load before running the JavaScript?
- Do you have any inline or absolutely positioned elements that could be throwing it off? Adding extra pixels etc. should not be necessary.
For a shareable demo, maybe a pen over on codepen with the simplest reproducible demo.
However, in this case it won’t be necessary as the link you provided has easily shown me the issue 😃
I tried it in Chrome and all was well as expected. Then tried it in Firefox. On first load, I was able to reproduce the issue. On reload, the issue disappeared which lead me to thinking I was right with thought 1. So I opened the inspector up, disabled the cache and reloaded the page 🎉 The issue reappeared. So the issue is around images being loaded and the JS being invoked before all of the content has loaded into the DOM.
The way round this will be to wait until images have loaded inside the layout and then initialise the layout code inside the load event callback 👍
There are packages out there that you might find helpful for this. There may also be some WordPress plugins that could provide useful.
Essentially "wait until images have loaded javascript" will be the search of choice 😉
I’ll certainly look to write up a solution to this as a bonus!
Hope that helps!
