Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP fix svg with no width height #3018

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

sponce
Copy link

@sponce sponce commented Jan 12, 2023

Summary

Fixed handling of svg images with no width/height attributes.
closes #1897

Details

Such images were not appearing in resulting canvas when using firefox. The details of the problem are explained in https://bugzilla.mozilla.org/show_bug.cgi?id=700533 and https://webcompat.com/issues/64352 but a rough summary is that firefox won't render svg with no width/height attribute via drawImage.
This fix thus recreates the missing attributes from the viewport one when they are missing

Testing

A new test was added in images/svg called nowidth.html, copied form external.html but using a modified version of image.svg now called imageViewPortOnly.svg and having no width/height attributes.
Running tests before the fix (keep only the first commit of this MR), you would see the generated screenshot for nowidth being empty. With the fix (second commit of this MR) it's working and identical to the original external case.

Problems remaining

This is still WIP as I had to add a 3rd commit with a bad hack (an extra sleep) as I was not able to debug the remaining issue of timing in the async code.
Here is a copy of the commit message :

This adds a sleep in renderReplacedElement so that drawimage works properly when the fix to svg files is used.
Without that, it looks like drawImage fires too fast and the fix is not yet done (code is async here)
So far I did not find out where I messed up with async code. Any help would be welcome !

Sebastien Ponce added 3 commits January 12, 2023 18:19
Such images were not appearing in resulting canvas when using firefox.
The details of the problem are explained in https://bugzilla.mozilla.org/show_bug.cgi?id=700533 and https://webcompat.com/issues/64352
but a rough summary is that firefox won't render svg with no width/height attribute via drawImage.
This fix thus recreates the missing attributes from the viewport one when they are missing
This adds a sleep in renderReplacedElement so that drawimage works properly when the fix to svg files is used.
Without that, it looks like drawImage fires too fast and the fix is not yet done (code is async here)
So far I did not find out where I messed up with async code. Any help would be welcome !
@Sharcoux
Copy link

I don't understand the need for sleep()

@sponce
Copy link
Author

sponce commented Aug 31, 2023

See the "problems remaining" section. I also do not get why I needed it. I must say I'm not really good at async code so I must have missed something somewhere and the sleep is just bad hack to make things work

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

SVG in img tag not rendering correctly in Firefox
2 participants