Lottie-web: mesureText return always same width on iOS

[yadomi]

Hi, first at all thanks for this great tool 👍

However, i'm encountering a problem on iOS (in Safari, not in a native app or with Lottie) with letter spacing. When you first load the page, every letter is way more spaced than expected but when you reload the page, everything get back to normal. (See: expected.png, whatactuallyhappens.png )

I've dig in the code and It's seem that the measureText function return always the same width for every letter of the animation, which cause huge spacing between letters.

Here is a small screencast of the issues with iOS

Does that mean fonts aren't fully loaded yet or a bad canvas support on iOS ?
Is this a know issue or is there any way to get ride of this ?

Thanks !

EDIT: This seem to happen only with externals fonts (eg: Google)

[bodymovin]

Hi, if you're adding the font yourself to the site, you need to make sure the font is loaded before calling the animation. The player assumes it's loaded unless it loads it itself.
Does that work for your case?

[yadomi]

Hi, thanks for your feedback.

I don't add the font myself but use the built-in font manager from BodyMovin by settings Google fonts when exporting in AE.

However, I've tried by settings None at export time and load them manually with webfontloader. I wait until I recieve the active event of webfontloader to load the animation, but I still get the issue.

[bodymovin]

I see. Can you share the .aep so I can try it?

[yadomi]

Hi,

Here is a zip with the .aep file: http://jmp.sh/x41oeQB
However this happen on most animation with custom fonts on iOS, not just this one

I've added in the .zip a demo using the built-in font manager to load google fonts and another one using webfont-loader. Hope that help.

Thank for your help 👍

EDIT: sadly, this seem to be related to: https://bugs.webkit.org/show_bug.cgi?id=172210

[yadomi]

Any update on this ?

[bodymovin]

I'm looking into it. There seems to be a bug loading the font. Will have more info later today.

[teebow]

Can't we test like this sample page https://smartslider3.com/bugs/webkit/fontfamily1/index2.html
to see if the size has changed and if so restart the measureText ?

[bodymovin]

Hi, it should be working on the latest version v 4.6.11

[teebow]

Hi,
Thanks for the new version ! ... but it's still not working.
The only way I have found is to use a timeout on IOS to be sure the font is really loaded... otherwise we have no way to know for sure that it's loaded. (The issue only happen for the first loading on a new tab)

[bodymovin]

Can you share a link? I've tested it and it worked fine, even for the first time.

[teebow]

you can try this : font-test
Open the link on safari on iPhone with IOS 10 or 11
the monoton and open sans have wrong size the first time only.

[bodymovin]

Should it work on Safari on a desktop Mac?

[teebow]

With your fix it now works on safari :)
As you can see the difference with this link
that uses a previous version of bodymovin. (test in private navigation to be sure nothing is cached)
But it does not work on iOS. If you don't have a iPhone it will be hard for you to reproduce... maybe with the iPhone simulator shipped with XCode you might reproduce it

Thanks for your time

[laeckerv]

Any update on this?

[laeckerv]

@bodymovin

I would really appreciate some update on this, as we would like to publish a website using bodymovin at the end of September.

Is there anything we can provide for further assistance?

[bodymovin]

Closing this issue since fonts should be working correctly now.