Bug 172165 – Canvas measureText brings wrong results in the first time for custom font face

• Component: Canvas
• Status: RESOLVED CONFIGURATION CHANGED

Created attachment 310255 [details]
HTML + WOFF for a repro

I have a custom font in a WOFF file that is dynamically loaded when needed.
In the first use (before the font is loaded), I call the canvas's measureText and I get a wrong result.
The returned result is much bigger than the final result, causing dynamic elements to render wrong.

I attached a demo using HTML and WOFF.
Call the measureTest() function several times. It uses the font-face declared in the style.
In the first time, the result is 103.271484375
In the next times, the result is 49.6240234375.
This function doesn't do any random calculation and should return the correct result (49.6240234375) every time.

In iOS 9, the first result is 51.123046875, and I think this was the case until iOS 10.3 (not including).
The small diff on older OSs didn't matter much but does matter now in the latest iOS.

The problem happens on all latest Safari + Safari Mobile + Safari Technology Preview versions.

[Alexey Proskuryakov]

Thank you for the report! What behavior do you expect in this case? It seems unsurprising that the size is different while the font is not loaded yet.

I agree it seems unsurprising, but I have no way of knowing that the result that I got is true in the first time.
I would expect it to be a synchronous command that waits for the custom font-face to get loaded.
Is there any workaround available that doesn't involve requesting a new animation frame or such?

[Roland Soos]

Your issue might be the same as mine. You can check my ticket here and do the tests: https://bugs.webkit.org/show_bug.cgi?id=172210

[Myles C. Maxfield]

I'm pretty sure I just fixed this in https://trac.webkit.org/changeset/216944/webkit. Can you try tomorrow's nightly build to see if it still happens?

I just verified with the nightly of Version 10.1 (12603.1.30.0.34, r217192).
The results are now different, but the first value is still wrong.

I get 48.18359375 in the first time, and the correct value of 49.6240234375 in the other times.

[Myles C. Maxfield]

There’s no way you can get exactly the correct width because the font required to perform the calculation hasn’t arrived yet.

What are your expectations around what the browser should do in your situation?

Is there an event I can subscribe to in order to make sure the font is rendered and the calculation will be done right after it?

[Myles C. Maxfield]

(In reply to erezg from comment #7)
> Is there an event I can subscribe to in order to make sure the font is
> rendered and the calculation will be done right after it?

Yes, you can use the CSS Font Loading API. https://www.w3.org/TR/css-font-loading/

[Radar WebKit Bug Importer]

<rdar://problem/97221073>