Play gif on visibility

I have a gif on my page, initially hidden with opacity: 0 and visibility: hidden (I can't use display: none here for other reasons).

<img src="xxx.gif" style="opacity: 1; visibility: visible;">

I show gif on click

$("#image").click(function(){$("#imageZ").css({"opacity":"1", "visibility":"visible"});});'

This code works. It displays images. But I have a strange problem with the lack of repeat gif. In Chrome, this is normal when a gif is displayed, it starts, and I see what I want.

In Safari this does not work, I see something. I think the gif is already read and does not restart when visibility: visible.

It worked when I used display: block instead of visibility: visible. Visibility adds it to the DOM and works in Chrome, so I don’t understand why it does not work in Safari.

Do you know this problem and have an idea to fix it?

Thank.

+4

All Articles