Closed
Bug 1430755
Opened 7 years ago
Closed 8 months ago
Text in SVG on canvas isn't shown
Categories
(Core :: SVG, defect, P3)
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 |
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.
Comment 1•7 years ago
|
||
Confirmed on latest nightly on windows 7
status-firefox57:
--- → unaffected
status-firefox59:
--- → affected
Component: Untriaged → SVG
Keywords: regression,
regressionwindow-wanted
Product: Firefox → Core
![]() |
||
Updated•7 years ago
|
status-firefox58:
--- → affected
OS: Unspecified → All
![]() |
||
Comment 2•7 years ago
|
||
[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
tracking-firefox58:
--- → ?
Ever confirmed: true
Flags: needinfo?(schien)
Keywords: regressionwindow-wanted
Comment 3•7 years ago
|
||
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)
Comment 4•7 years ago
|
||
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?
Comment 5•7 years ago
|
||
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)
Comment 6•7 years ago
|
||
Too late for 58, I'm afraid.
Updated•7 years ago
|
status-firefox60:
--- → fix-optional
status-firefox61:
--- → affected
status-firefox-esr52:
--- → unaffected
Updated•7 years ago
|
Updated•2 years ago
|
Severity: normal → S3
Updated•8 months ago
|
You need to log in
before you can comment on or make changes to this bug.
Description
•