GIF animation is reset when a new image is added to the page.
Hello! Short story: I recently discovered that adding a new GIF image to a page resets the animations of existing GIF images on the page with the same src.
Expected behavior: Adding a new GIF image to the page should not reset the animation of existing images with same src.
Actual result: Adding a new GIF image to the page resets the animation of all existing GIF images on the page with same src.
Code with example: https://codesandbox.io/s/heuristic-platform-jsguir Video demo: https://www.youtube.com/watch?v=k-ZMrrqq_KI
Simplified version of the code showing unexpected behavior: https://codesandbox.io/s/elastic-shtern-vwrcx1
Does anyone know why this is happening? Is this a bug?
Browser: Firefox Developer Edition 102.0b4 (64-bit) OS: Windows 11
Wšykne wótegrona (1)
I think that all GIF image animations use the same code and that they are somehow synchronous (i.e. use the same frame timings). It is possible that loading a new GIF image resets this code and causes it to restart all GIF animations. In that case there is not much you can do about this.