Imported text can be cut off

[fsih]

Expected Behavior

Text should not be cut off

Actual Behavior

After downloading the file and re-uploading, the text is cut off on the stage

Steps to Reproduce

1. I created a costume that was this text
2. Download file
3. Upload file in a new tab

Operating System and Browser

Mac OSX Chrome

[fsih]

Here is the project, renamed from .sb3 to .zip
untitled-project-9_2_2018-1_02_39 PM.zip

[fsih]

The infamous drag kiran bug
(Load https://llk.github.io/scratch-gui/smoke/#228228816 and look through backdrops. The text tends to be cut off the first time it loads)

[fsih]

As shown by loading project https://scratch.mit.edu/projects/249881325/ , this issue is also happening to scratch 2 projects

[fsih]

I tracked the issue to _transformMeasurements() in scratch-svg-renderer/src/svg-renderer.js

_transformMeasurements is used in most places where we load SVGs. _transformMeasurements doesn't believe whatever the SVG says about its viewbox, width, and height, and calculates its own measurements by actually rendering the SVG into the document. It seems that in order to be performant, SVGs with custom fonts are rendered in some temporary manner by the document, so when the measurement is taken synchronously, it may report a smaller size than the element that is eventually fully rendered. SVGRenderer uses this immediately-obtained size to decide how big to render an image, and the text gets cut off as a result.

The solution is to wait for the element to fully finish rendering before taking its measurement. However, this has a large cascading effect where everything has to become asynchronous. This fix is substantial and could be risky.

/cc @cwillisf in case you have thoughts

[cwillisf]

That makes a lot of sense -- I've definitely seen some FOUC-like behavior with fonts on other web sites, where the text would render in some fallback font at first and then change to the real font after a split second.

I suspect you're right that making all of this async is the correct solution. I wonder if it would help to put some invisible text using each of our fonts somewhere on the page, but even if it does help I wouldn't expect that to be a guarantee of synchronous rendering. Also, you can't drag bears.

[fsih]

Thanks for the input! This issue doesn't repro unless it's the first time loading text (I have to open a new tab every time I test), so I think invisible text on the screen might not help s: