When working on websites, I sometimes encounter problems that need to be resolved, issues I didn’t foresee when planning. From bugs arising from compatibility between the theme used and plugins to bugs that seem nonsensical and need to be fixed with what I call “brute-force” methods, meaning writing code to modify an existing functionality that gives me an undesired result.
Generally, animations are not a problem for me. I play with them until I find an animation I like and then continue working on something else. However, I sometimes find seemingly minor issues that consume a lot of my time.
In the case of the Lyset website, after creating an SVG for the header that animated, I added it to the site, refreshed, and was very happy to see it working as I wanted. But when I refreshed again, I found it no longer worked; the animation wouldn’t start at all. Why? I couldn’t figure it out, but after more tests and research online, I discovered that there is a problem with SVG files containing CSS animations inside them. Although normally, on any site load, all the CSS code should be executed, the animations would only restart if the file was cleared from the cache. I still don’t know why this happens, but being stubborn, I started looking for increasingly complex solutions.
First, I tried removing the SVG files from the cache, making them expire immediately. But obviously, this didn’t work. Then I checked if the animation would restart if I switched from displaying the SVG as an image to including it as a background through CSS. Since that didn’t work either, I tried writing JavaScript code that loads the SVG file after the site starts loading. After more research online, I discovered that it might be possible for the animation to restart after a refresh if I add the date to the SVG file’s link using JS. Unfortunately, I hit a wall with this animation.
Nothing worked, and I had already lost a lot of time. I was already thinking of very complicated things for what should have been simple. Then I remembered another website where I had added SVG animations, but in that case, the code was included directly in the page by the theme (even though the code was uploaded by me through an SVG file), not through a link. Although I don’t like to include code directly in the pages I create because I don’t expect our clients to know how to modify it, I decided to try this approach. In the end, this simple and quick solution worked.
Over time, I’ve built up a long database of bugs and quirks like these that help me when working on websites. It can be demoralizing to work on a single problem for many hours (or even days), but solutions are generally found. Some solutions are simple and elegant, while others require creating something akin to Frankenstein’s monster. But every time, in the end, I feel like I’ve solved a tough puzzle or won a difficult chess match.
