Bug 284625 – Animated SVG referenced via img tag does not animate correctly, fine via Object tag

• Status: RESOLVED
• Resolution: FIXED
• Component: Animations

[Ben Frain]

This is a bug on a live site currently https://games.bet365.com/all-games/Featured (need to be logged in to see the animations). Here is a reduction of the issue:

https://codepen.io/benfrain/pen/XJrNmbw

An img tag links to an animated SVG file. In Safari, the animation does not render correctly, with the visuals 'breaking up'.

If the same animated SVG is loaded via an Object tag, and uses different positioning in CSS, the animation displays correctly. Unsure whether the issue is simply due to the loading mechanism (img src rather than object data) or the associated CSS is a contributing factor.

Note that in the reduction, toggling the `position: relative` declaration in the object related CSS rule makes the OTHER image start to display correctly, which makes no obvious sense.

[Radar WebKit Bug Importer]

<rdar://problem/141815698>

[Karl Dubost]

Created attachment 473649 [details]
rendering in safari, firefox, chrome

Thanks a lot for the reduced test case. 
This is indeed happening. 

Safari Technology Preview  18.2          20621.1.6
Firefox Nightly            135.0a1       13524.12.18
Google Chrome Canary       133.0.6914.0  6914.0

[Said Abou-Hallawa]

Created attachment 475431 [details]
reduced test case

I am attaching a reduced test case. I think it happens because of "object-fit: cover;" which is applied to the <img> element. If this CSS property is removed, the bug does not happen. It looks like a repainting issue.

[Taher]

Pull request: https://github.com/WebKit/WebKit/pull/56504

[EWS]

Committed 305542@main (1b0c248d6d1d): <https://commits.webkit.org/305542@main>

Reviewed commits have been landed. Closing PR #56504 and removing active labels.