Bug 219770 - SVG with embedded font triggers img.onload before font is available
Summary: SVG with embedded font triggers img.onload before font is available
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Images (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-12-11 00:11 PST by Chris Dowling
Modified: 2021-12-01 06:40 PST (History)
7 users (show)

See Also:


Attachments
HTML + JS to create SVG, render to img and draw to canvas (59.31 KB, text/html)
2020-12-11 00:11 PST, Chris Dowling
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Chris Dowling 2020-12-11 00:11:47 PST
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.
Comment 1 Smoley 2020-12-15 18:38:50 PST
Thanks for filing, I can reproduce this on Safari 13.1.3 as well as STP 117.
Comment 2 Radar WebKit Bug Importer 2020-12-15 18:39:02 PST
<rdar://problem/72367071>
Comment 3 Kaiido 2021-10-21 23:44:15 PDT
Note that this also affects <image> elements (when the image is not cached)
https://jsfiddle.net/uj1zthf3/
Comment 4 Kaiido 2021-10-21 23:55:29 PDT
Sorry for the noise missed that 39059 already handles images.
Comment 5 Markus 2021-12-01 06:40:33 PST
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?