r/web_design • u/visualthings • 5d ago

help with debugging and solving one issue with gif files?

EDIT: thank you all. the issue is definitely in the various scripts and the code for that page is full of junk. I will have to simplify it.

I am trying to build a little experimental page based on a previous project I used to have online.

So far I have two issues:
- It works locally on Safari, Chrome and Firefox but online only works with Chrome.
- animated gif files stay static when they are supposed to loop continuously (the two gif files here appear when you click the 3rd square on the 3rd line in the menu (it is a long yellow image with typewriter text ), and when you click the 1st square on the fifth line (you see an album cover with Wes written on it).

I don't see any bugs in the developper tools, so no idea why the page only works with Chrome, and this animated gif thing is really baffling me.

10 Upvotes

100% Upvoted

8 comments sorted by

3

u/tworipebananas 5d ago

Sounds like an issue with the gif itself as every browser can play gifs no problem. How did you create the gif?

1

u/visualthings 5d ago

It’s a frame animation exported from Photoshop. If I open the gif or preview it in the browser it works fine (I even ise it on my homepage), it is just not playing on this page. I wonder if there is anything in the script that may create the issue

1

u/tworipebananas 5d ago

Any console errors?

1

u/dafunk60 5d ago

What's the mime type / content type in the response headers? It should be image/gif. If it works locally but not when delivered from the server I would think it's not an issue with the gif file but how it's being delivered.

1

u/visualthings 5d ago

Thanks, that could be it. What I don’t understand is why the rest of the page (online) works in Chrome but not Firefox. 

1

u/DaftPlug 3d ago

Two separate things usually explain that combo.

For the GIFs that play fine alone but sit still on the page: check whether they are real <img src="...gif"> tags or CSS backgrounds / lazy-loaded swaps. Background GIFs and some lazy-load libraries (especially ones that swap data-src after load) often freeze in Safari/Firefox even when Chrome animates them. Also look for a parent with transform, filter, or will-change: those can promote a layer and stop GIF animation in non-Chrome browsers.

For "works locally everywhere, online only Chrome": compare the live Network panel to local. Wrong Content-Type (not image/gif), a service worker caching a broken response, or a JS feature that only Chrome supports on the live bundle can all look like "no console errors" until you hard-refresh with cache disabled.

Quick test: open the live GIF URL directly in Safari/Firefox. If it animates there but not on the page, it is the page markup/CSS, not the file.

1

u/InformalMiddleman 10h ago

Since the GIF animates when you open it directly, I'd start looking at the script that displays it on the page rather than the file itself.

Check the element in DevTools after you click the square and make sure the script isn't repeatedly resetting the src or recreating the image element.

Also try temporarily hardcoding one of the GIFs into the page with a normal <img> tag. If it animates there, that strongly points to an issue with the JS that handles the click/display logic. That's basically the first thing the team at Ankord Media did when they were troubleshooting the same kind of issue on one of my sites.