1512322 - Temporary shows wrong svg image

Status: RESOLVED WORKSFORME

(Core :: SVG, defect, P3)

Description

[Jordy Moos]

Attachment: firefox-svg-bug.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0

Steps to reproduce:

I build the system with Elm, which allows me to "toggle" between two states/frames. Which in turn allows me to see that both frames are drawn correctly, with that I mean that both frames are drawn correctly if you look at the frames independently. But if you quickly swap between frames you see that svg is drawing falsely.


Actual results:

I'm drawing lots of SVG images where some of the images are animating (different images over time). What happens is that some of the svg-image elements show the previous image before drawing the correct image. Which is not really an issue if that happens on the spot that the previous image also was. But that is not the case. What looks like that happens is: Svg detects that some image-elements changed, and re-uses the "old-removed" image-elements for the new ones. Therefor what you see is images popping up on places where they should never be (for a brief second)


Expected results:

I should not see "old" images on places where I never put them. Maybe we are re-using svg-image elements but we do not clear the previous src before we replace it on the canvas?

I have a little demo here which makes the problem visible:
https://jordymoos.github.io/elm-pixel-boulder-game/?startLevel=official/002&pixelSize=32&width=40&height=17&hideDebug=1

If you move the player 3 ticks down (you can use the arrow keys) and then let him run to the left (which consumes the dirt under the rocks). Then a lot of animation is happening. And you will see some rocks changing to the player image for a brief moment. It happens to me every time when trying it in Firefox but never happens on Chrome.

Comment 1

[Jordy Moos]

I should have put the link to the game (to see the bug in action) to the "Steps to reproduce" section. But I miss understood the meaning of that block. (I thought it asked me steps that I took to reproduce it).

I can not edit my report. Therefor I'm letting you folks know that the reproduce step is in the "Expected results" block.

Comment 2

[Robert Longson [:longsonr]]

We're going to need a far far more minimal example here if we're to investigate.

Comment 3

[Jordy Moos]

I understand,

I tried to reproduce the behavior in a small html page setup but I could not get the bug to show up then.

This is what I did:
I copied the svg of two frames (which where showing the bug) and pasted them in a html file where both svg's where replacing each other every x milliseconds. But doing this both frames and the transition rendered correctly.

I think there are too many additional parts to the problem which I can not narrow down. I totally understand that this report will be closed.

Cheers!

Jordy

Comment 4

[Jordy Moos]

I found some additional information in case a similar bug comes up:

I drew <image> svg elements for moving entities. And I drew <use> for "non moving parts" (cant remember why).
Only the <image> svg elements caused the display of wrong images for a short period of time. While <use> was always showing the correct image.

It is still weird that this "wrong image" behavior did not show up in Chrome but does in Firefox.
I was hoping that we did something wrong with re-using <image> svg elements (not clearing the previous xlink before replacing it). But I could not find the code that takes care of this.

Comment 5

[Robert Longson [:longsonr]]

Seems OK now.