CODEWITHSUNDEEP
google-chromeresponsive-designanimated-gifparallax
Miet
Miet

Reputation: 45

Animated gif won't work properly in Chrome

There seems to be a problem with getting a gif to work in Chrome. It works fine in FireFox and in Opera, but in Chrome it only seems to work when I keep scrolling around a bit. It might be useful to know I am building a responsive parallax website with a gif in it. I cannot find any information on this, only that Chrome sometimes will not play the gif at all.

Upvotes: 1

Views: 37844

Answers (2)

ClosDesign
ClosDesign

Reputation: 3924

Not sure if you still need a fix for this but this is what I had to do when the GIF was a background image. Chrome caches the GIF so it only plays once. You have to 'force' the animation to play again with some jQuery.

<script type="text/javascript">
$(document).ready(function () {
    $("#myContainer").css("background-image", "url(/images/myAnimation.gif?"+ Math.random() + ")" );
});
</script>

Pretty much you add a random number at the end of the GIF url to force the browser to replay the animation because it thinks it is a new instance of the image. I would still put the GIF in the CSS on your element background just in case of JS issues on browsers.

Kind of hacky but it works.

Upvotes: 2

Miet
Miet

Reputation: 45

The problem was the gif was set as a background on 100%. When put it as an image inside the html, it worked again. This does not explain why, but it does provide a work around.

Upvotes: 1

Related Questions