svg in img tag vs inline difference

[Schweinedog]

So it feels like this potentially has been asked a hundred times already, but my searches didn't give a satisfying answer. Please feel free to just refer me!

 

I have this simple coin flip animation and I was coding the page it is used on with inline svg. But because of some restriction, in production that wasn't allowed and I had to revert to <img> tags. Now the result isn't 100% experience breaking, but there is a really wonky moment in the rotation in Firefox (most other browsers seem to work fine) as you can see in the codepen (in Firefox).

 

Is there a known way around it? Can you force/trick Firefox into behaving like other browsers?

 

Thank you in advance for your help!

Kind Regards,

Simon

See the Pen MWpQMQq by saiminh (@saiminh) on CodePen

[Cassie]

Looks fine in firefox to me. What version are you on? Windows or Mac?

Additionally, I assume you've got those three different divs animating to test whether there's a difference between rotations on different types of element? It's a good practise to get into when you're testing the difference between SVG DOM and HTML DOM - but in this case all the elements are divs, so you won't see any difference between them.

[OSUblake]

I see it on Windows, but I don't know if it's something gsap can fix. Animating it without gsap still shows the problem.

 

See the Pen 4e8101757bcf27ea36bca073daa74c67 by osublake (@osublake) on CodePen

 

You should probably file a bug with Firefox so they can look at it.

[OSUblake]

Even animating scaleX to -1 has the same problem.

 

See the Pen d2f5f31c2993c1faeb910fbab706765b by osublake (@osublake) on CodePen

 

Definitely a Firefox rendering issue.

[Schweinedog]

2 hours ago, Cassie said:

Looks fine in firefox to me. What version are you on? Windows or Mac?

Additionally, I assume you've got those three different divs animating to test whether there's a difference between rotations on different types of element? It's a good practise to get into when you're testing the difference between SVG DOM and HTML DOM - but in this case all the elements are divs, so you won't see any difference between them.

Thanks for replying! I'm on Mac and I've got the latest version (updated today actually, before and after update) of Firefox.

Strange you don't see it...

In this case it's not really about SVG DOM vs HTML DOM, as the third example with a regular PNG <img> tag shows. The issue occurs whether you target the div wrapping it or the element itself. The odd one out that is misbehaving for me is the svg within the IMG tag...

[Schweinedog]

14 minutes ago, OSUblake said:

Even animating scaleX to -1 has the same problem.

 

 

 

 

Definitely a Firefox rendering issue.

 

Thanks Blake! Thankfully in the end I could get the server to render the images as inline <svg> so the issue won't affect me. I'll see if I can file a report with FireFox or see if they have any good reasons for this different way of rendering it. I'll update this post if I hear back.

Cheers!

Simon