Bug 219770

Summary: SVG with embedded font triggers img.onload before font is available
Product: WebKit Reporter: Chris Dowling <chrisdowling84>
Component: ImagesAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: koivisto, markus.hofer, mmaxfield, sabouhallawa, smoley, tristan.fraipont, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=39059
Attachments:
Description Flags
HTML + JS to create SVG, render to img and draw to canvas none

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?