Bug 219770 – SVG with embedded font triggers img.onload before font is available

• Status: NEW
• Component: Images

[Chris Dowling]

Created attachment 415974 [details]
HTML + JS to create SVG, render to img and draw to canvas

Rendering an img tag with a href of an SVG image containing an embedded font results in WebKit triggering the img onload function before the img is ready.

I am verifying this by creating a Blob URL of an SVG with embedded font, loading that to an img tag and drawing that img to a canvas - the canvas remains blank.

This only occurs the first time the image is loaded.  On subsequent attempts and page refreshes the image loads fine, as do other images with the same font embedded.  The problem reappears when the browser is restarted.

This is a similar issue to 39059 but that bug relates specifically to embedded images.

[Smoley]

Thanks for filing, I can reproduce this on Safari 13.1.3 as well as STP 117.

[Radar WebKit Bug Importer]

<rdar://problem/72367071>

[Kaiido]

Note that this also affects <image> elements (when the image is not cached)
https://jsfiddle.net/uj1zthf3/

[Kaiido]

Sorry for the noise missed that 39059 already handles images.

[Markus]

I am facing the exact same issue in a customer project and I am very curious how I can get around that problem.

As described in ticket 39059 adding a slight timeout in the onload callback makes it work. But using a magic number like "100 ms" seems to be very brittle to me.
Is it depending on the size of the embedded assets (font or image), network speed, etc...?

Does anyone know if the setTimeout workaround is reliable in a production environment or if there is a better workaround?