Copy link to clipboard
Copied
Since the latest Animate update I've come across a text bug where certain text characters sometimes disappear during/after a motion tween. See this example:
It should say 'An instinct for growth', which it does when the text isn't moving. But here I've used a classic motion tween on it, moving it from the bottom to it's end position. During that tween I can already see the i's blinking and when it has reached it position all i's have disappeared. In another example I've used another font and in that case the L's would disappear.
This only happens when I have those texts motion tweened. The solution would be to convert all texts to shapes, but I much rather keep my texts editable. Does anyone know what is causing this? Is it a bug in the recent update or can I fix it somehow without breaking down those texts?
Some points to note--
This has nothing to do with tweens. It only has to do with the coordinates the font ends up on. Tweening just makes it more apparent.
It only happens with fonts rendered as static, not dynamic. So it's technically an issue with the drawing API, not the text API.
It happens with any font with narrow strokes. Arial Narrow shows the issue at point sizes around 18 and below.
It only affects vertical strokes, not horizontal ones.
It also happens with fonts broken apart in the editor,
...Copy link to clipboard
Copied
I checked that the issue is true for Windows too, which it is. And I downloaded the previous version of Chrome on Mac, and the problem wasn't there.
I'll add notes to the Google post. I'm involved with Google too, so I'll try to get some experts to drop by.
Copy link to clipboard
Copied
I have access to the private discussions in the Google forum, and for Chrome there was an ongoing topic about the roll out of version 59. Seems Google have updated Chrome twice since the problem version came out, but even the latest version shows the problem.
I added a note to that discussion, asking if someone could drop by.
Copy link to clipboard
Copied
Thank you so much for your expertise and support, will sure be able to get this figure out.
Till then the workaround shall be downgrading Chrome to the previous version.
Copy link to clipboard
Copied
Yes, would need to be 58.0.3029.96 or earlier. Here's the page with old versions:
Download older versions of Google Chrome for Windows, Linux and Mac
Copy link to clipboard
Copied
Some points to note--
This has nothing to do with tweens. It only has to do with the coordinates the font ends up on. Tweening just makes it more apparent.
It only happens with fonts rendered as static, not dynamic. So it's technically an issue with the drawing API, not the text API.
It happens with any font with narrow strokes. Arial Narrow shows the issue at point sizes around 18 and below.
It only affects vertical strokes, not horizontal ones.
It also happens with fonts broken apart in the editor, BUT only when tested on individual characters (manually breaking apart characters results in exactly the same shape data as what static generates). When multiple characters are broken apart, they render fine in Chrome. The difference is this:
"ii" as static text:
this.shape = new cjs.Shape();
this.shape.graphics.f("#000000").s().p("AgEA2IAAhNIAJAAIAABNgAgEglIAAgQIAJAAIAAAQg");
this.shape.setTransform(41.2,10.4);
this.shape_1 = new cjs.Shape();
this.shape_1.graphics.f("#000000").s().p("AgEA2IAAhNIAJAAIAABNgAgEglIAAgQIAJAAIAAAQg");
this.shape_1.setTransform(38.5,10.4);
"ii" as broken apart text:
this.shape_3 = new cjs.Shape();
this.shape_3.graphics.f("#000000").s().p("AAIA2IAAhNIALAAIAABNgAgSA2IAAhNIAKAAIAABNgAAIglIAAgQIALAAIAAAQgAgSglIAAgQIAKAAIAAAQg");
this.shape_3.setTransform(39.9,30.4);
Apparently something about batching everything together into a single shape causes the vectors to be immune to this bug.
So anyway, it seems currently the best workaround is to break apart any static text in the IDE. A bit of a nuisance, but far less so than asking all your potential viewers to downgrade Chrome.
Copy link to clipboard
Copied
This isn't just happening with text I have a vector logo pasted in from illustrator (the fonts are outlined) that has missing "i"s
Copy link to clipboard
Copied
Yes, as already noted, the problem is with the canvas drawing API, not the canvas text API.
Copy link to clipboard
Copied
As far as we've experienced here at work, those issues seem to have gone with the realease of the last update (60.0.3112.90).
Could anyone confirm this?
Cheers
Copy link to clipboard
Copied
I just upgraded chrome and it looks fixed to me also. Although theres a version floating around out there that has this bug in it if people don't upgrade. Not much we can do about that though