Closed Bug 1430755 Opened 7 years ago Closed 8 months ago

Text in SVG on canvas isn't shown

Categories

(Core :: SVG, defect, P3)

Unspecified
All
defect

Tracking

()

RESOLVED DUPLICATE of bug 1901414
Tracking Status
firefox-esr52 --- unaffected
firefox-esr60 --- wontfix
firefox57 --- unaffected
firefox58 - wontfix
firefox59 --- wontfix
firefox60 --- wontfix
firefox61 --- wontfix
firefox62 --- fix-optional

People

(Reporter: ltetzlaff, Unassigned)

References

Details

(Keywords: regression)

Attachments

(1 file)

23.23 KB, application/x-zip-compressed
Details
Attached file svg_example.zip
User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:59.0) Gecko/20100101 Firefox/59.0 Build ID: 20180115220459 Steps to reproduce: This is a simplified example originating from an Indesign like app based on Angular 5 and Fabric.js. It displays a SVG image on a canvas. Since a SVG displayed as image on a canvas can’t reference a font file on the server the app (and the example code) loads the font into a Blob and references this Blob in the SVG. The example code contains: - index.html - render.js - svg.svg - JotiOne-Regular.ttf The SVG contains two lines of text. The first is “Hello World”, the second “Hello again NUMBER”. The SVG also contains a style definition with a @font-face. The first line is supposed to be rendered with this font. The src field of the font-face contains a url with a placeholder. The SVG is loaded as string and the placeholder is replaced with a url to a blob where the font was loaded before. The string is now converted via Blob and FileReader to a data url and assigned as the image src. This image is rendered on the canvas. To simulate the usage in the real app there is a move button. It creates a new image from the svg source and displays it at another position. Problem: this works as expected in FF 57. In Nightly (59.0a1 (2018-01-15) (32-Bit)) the first line is not rendered. Even pressing the move button (and creating a new image) doesn’t display the line. But there are two flags in the code. Setting useTimeout to true uses for the first render call setTimeout with a time 0. Now the first image contains the line and the images after pressing move also. Setting only the second flag useNumber to true replaces the text NUMBER with a counter value, so every image does contain a change. Now the first line isn’t displayed on load, but pressing move does display it in the next image. It seems that there is a timing problem and the font can’t be rendered on the first time. The rendered image is cached and reused whenever the same content is used. Actual results: The text in the SVG isn't shown Expected results: The text in the SVG should be rendered with the assigned font.
Confirmed on latest nightly on windows 7
Component: Untriaged → SVG
Product: Firefox → Core
OS: Unspecified → All
[Tracking Requested - why for this release]: Text not render regression window: https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=9aa27ded4a4e1360813b3af5e6aeaae1094ad597&tochange=f6d9016ac75aee2d94a3a6e4ad53ca6326d672a6 regressed by: f6d9016ac75a Shih-Chiang Chien — Bug 1381434 - off-main-thread loading web font r=heycam @:schien your patch seems to cause the regression, can you look into this?
Blocks: 1381434
Status: UNCONFIRMED → NEW
Ever confirmed: true
Flags: needinfo?(schien)
Tried debug this issue today, the main different is the order between font load complete and canvas drawImage. Before Bug 1381434, font load complete is always finished before canvas drawImage. However after Bug 1381434, canvas drawImage will be finished first. Canvas drawImage seems to capture the snapshot of SVG rendering result before user font is loaded and it never get updated, even userfont is loaded completely later. @heycam do you know why canvas is not updated after the user font is loaded? I'm not familiar with the SVG rendering pipeline so I would need some help here.
Flags: needinfo?(schien) → needinfo?(cam)
BTW, if I modify the svg.svg in the attachment 8942886 [details] and point the font-face.src to the JotiOne-Regular.ttf directly. When I open the SVG file in browser, I noticed that the "Hello World" will be rendered in default font first, then changed to use the user font in a second. That's the reason why I guess that canvas capture a snapshot of SVG but not updated after user font loaded. Or, another guess, should we fire image.onload for a SVG image after all the required resources are loaded completely?
Yes, it's definitely correct for the snapshot not to be updated -- it's a one time thing that renders the SVG image content as it is at that moment. I don't think specs say whether fonts referenced by @font-face by blob: or data: URLs should be available immediately, although we do try to do that for data: URIs: https://searchfox.org/mozilla-central/rev/48cbb200aa027a0a379b6004b6196a167344b865/gfx/thebes/gfxUserFontSet.cpp#598-601 and maybe we should do that for blob: URIs too. In any case, font loads should be delaying the load event. They do for HTML documents but I haven't tested for SVG images.
Flags: needinfo?(cam)
Too late for 58, I'm afraid.
[ Triage 2017/02/20: P3 ]
Priority: -- → P3
Severity: normal → S3
Status: NEW → RESOLVED
Closed: 8 months ago
Duplicate of bug: 1901414
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: