Works fine in animate but when I test html5 in browser text slides out of stage

[McCoy.sarah]

I'm new to adobe animate. I made a simple animation:
• Layer 1: same background with logo stays on stage the whole time- no problem this works throughout
• Layer 2: Text block #1 set alpha 0% fades to 100% (just the alpha changing so type will "fades in."), easing is turned off; works fine in animate; but when I test html5 it slides off the stage down and to the right. It isn't supposed to move on the stage, just stay in place and fade in; go blank and fade to the next text.
• Layer 3:  Text block #2 set alpha 0% fades to 100% (just the alpha changing so type will "fades in."), easing is turned off; works fine in animate; but when I test html5 it slides off the stage down and to the right. It isn't supposed to move on the stage, just stay in place and fade in; go blank and fade to the next text.
• Layer 4: Button set alpha 0% fades to 100%; works fine in animate; easing is turned off; works fine in animate; but when I test html5 it slides off the stage down and to the right. It isn't supposed to move on the stage, just stay in place and fade in; go blank and fade to the next text.
I have it on loop and I only have 15 seconds. 

Please advise.

[JoãoCésar]

Hi.

Possible reasons would include:
- The browser is using a different font. If you have dynamic text fields, make sure to use web fonts;

- Not enough space left in the text field's bounding box. Make sure to leave a little padding horizontally;
- Difference in line heights between browsers. Generally the code below, shared here in the forums a few years ago, works very well. You just need to open up the Actions Panel in the first frame of the main timeline and place it in there.

function fixText()
{
	var chrome = navigator.userAgent.toLowerCase().indexOf("chrome") > -1;
	var firefox = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
	
	if ((chrome || firefox) && createjs)
	{
		createjs.Text.prototype._drawTextLine = function(ctx, text, y)
		{
			if (this.textBaseline === "top")
				y += (this.lineHeight || this.getMeasuredLineHeight()) * 0.14;
			
			ctx[this.outline ? "strokeText" : "fillText"](text, 0, y, this.maxWidth || 0xFFFF);
		};
	}
}

fixText();

Please let us know if you still have issues.

Regards,

JC

[McCoy.sarah]

Thanks JC, Even if I have text converted to outlines, would that be an issue? 

[JoãoCésar]

If you convert text fields to fill shapes you should be fine.

Or you can just use static text fields.

[kglad]

@JoãoCésar 

how can fixText() be tested? eg, how do you create the problem?

[JoãoCésar]

Check if text fields' offset in Chrome and Firefox will be smaller on the y axis.