1659378 - svg image flickering when rapidly changing xlink:href

Status: VERIFIED INVALID

(Core :: Graphics, defect)

Description

[jake]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36

Steps to reproduce:

We have an <image> tag within an <svg>.
In order to animate the image, jQuery is used to change the <image>'s attr xlink:href periodically (every 200ms~600ms).

Note: When hardware acceleration is turned on, the flickering is aggressive/worse. When it is turned off, the flickering happens just intermittently.

Actual results:

The animation flickers. The image disappears for a split second before the next image appears.

Expected results:

The image animation should be smooth, i.e. the image does not disappear before displaying the next frame.

Note: In version 78, the flickering did not occur. The animation was smooth.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 2

[Timothy Nikkel (:tnikkel)]

Can you upload or provide a link to a testcase?

Comment 3

[jake]

Attachment: image_flicker_test.html

Can't upload the actual code, but this test file reproduces the bug.

Comment 4

[Robert Longson [:longsonr]]

You need to keep the images cached in Image objects so they aen't discarded.

Comment 5

[jake]

Attachment: image_flicker_test2.html

Tried loading the next image in a separate (hidden) <image> element, then when it finishes loading, use replaceWith to swap it into the display.

I can't use new Image() because that creates an <img> tag, and my concern is about the <image> tag inside an <svg>, which is different. So I tried caching it using an existing <image> element instead.

Unfortunately, it didn't fix the flickering. Is it because changing xlink:href immediately drops/discards the image?

By the way, when the test is run in Chrome or IE, the image doesn't flicker, even when cache is disabled. It just continues to display the current image until the next image is loaded.

Comment 6

[Robert Longson [:longsonr]]

You can use an Image object. I tried it and it stops the flickering, you'd need to wait for all the images to load. I haven't bothered in my partial fix but you could use Promises here and wait till they all resolved perhaps.

Comment 7

[Robert Longson [:longsonr]]

Attachment: partial fix using Image cache

Comment 8

[jake]

(In reply to Robert Longson [:longsonr] from comment #6)

You can use an Image object. I tried it and it stops the flickering, you'd need to wait for all the images to load. I haven't bothered in my partial fix but you could use Promises here and wait till they all resolved perhaps.

Thank you so much! It worked.

Comment 9

[jake]

By the way, what changed from version 78 regarding this issue? This flickering didn't occur in our web app in version 78 (even with hardware acceleration turned on). We only noticed it on version 79 and that turning off hardware acceleration somehow reduces the amount of flicker.
So I was wondering if maybe it can be returned back to that state somehow?