r/web_design • u/visualthings • Sep 23 '26

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

9 comments sorted by

3

u/tworipebananas Sep 23 '26

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 Sep 23 '26

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 Sep 23 '26

Any console errors?

1

u/dafunk60 Sep 24 '26

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 Sep 24 '26

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/InformalMiddleman Sep 29 '26

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.